<!DOCTYPE html>


<html lang="zn-CH">


<head>
  <meta charset="utf-8" />
    
  <meta name="description" content="What I can do is to Do My Personal Best!" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    JavaScript编码规范 |  小熊的博客
  </title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  
  <link rel="shortcut icon" href="http://www.cdn.adingxiong.com/b5363a06dc744d79a94021492bcefe27" />
  
  
<link rel="stylesheet" href="/blog/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/blog/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

<link rel="alternate" href="/blog/atom.xml" title="小熊的博客" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    <main class="content on">
      <section class="outer">
  <article id="post-js-standard" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  JavaScript编码规范
</h1>
 

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/12/15/js-standard/" class="article-date">
  <time datetime="2018-12-14T16:00:00.000Z" itemprop="datePublished">2018-12-15</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/blog/categories/%E5%9F%BA%E6%9C%AC%E8%A7%84%E8%8C%83/">基本规范</a>
  </div>

      
      
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> Word count:</span>
            <span class="post-count">12.4k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> Reading time≈</span>
            <span class="post-count">50 min</span>
        </span>
    </span>
</div>

      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    
    <div class="article-entry" itemprop="articleBody">
      
      

      
      <p><a href="#1-%E5%89%8D%E8%A8%80">1 前言</a></p>
<p><a href="#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC">2 代码风格</a></p>
<p>　　<a href="#21-%E6%96%87%E4%BB%B6">2.1 文件</a></p>
<p>　　<a href="#22-%E7%BB%93%E6%9E%84">2.2 结构</a></p>
<p>　　　　<a href="#221-%E7%BC%A9%E8%BF%9B">2.2.1 缩进</a></p>
<p>　　　　<a href="#222-%E7%A9%BA%E6%A0%BC">2.2.2 空格</a></p>
<p>　　　　<a href="#223-%E6%8D%A2%E8%A1%8C">2.2.3 换行</a></p>
<p>　　　　<a href="#224-%E8%AF%AD%E5%8F%A5">2.2.4 语句</a></p>
<p>　　<a href="#23-%E5%91%BD%E5%90%8D">2.3 命名</a></p>
<p>　　<a href="#24-%E6%B3%A8%E9%87%8A">2.4 注释</a></p>
<p>　　　　<a href="#241-%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A">2.4.1 单行注释</a></p>
<p>　　　　<a href="#242-%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A">2.4.2 多行注释</a></p>
<p>　　　　<a href="#243-%E6%96%87%E6%A1%A3%E5%8C%96%E6%B3%A8%E9%87%8A">2.4.3 文档化注释</a></p>
<p>　　　　<a href="#244-%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89">2.4.4 类型定义</a></p>
<p>　　　　<a href="#245-%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A">2.4.5 文件注释</a></p>
<p>　　　　<a href="#246-%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E6%B3%A8%E9%87%8A">2.4.6 命名空间注释</a></p>
<p>　　　　<a href="#247-%E7%B1%BB%E6%B3%A8%E9%87%8A">2.4.7 类注释</a></p>
<p>　　　　<a href="#248-%E5%87%BD%E6%95%B0/%E6%96%B9%E6%B3%95%E6%B3%A8%E9%87%8A">2.4.8 函数/方法注释</a></p>
<p>　　　　<a href="#249-%E4%BA%8B%E4%BB%B6%E6%B3%A8%E9%87%8A">2.4.9 事件注释</a></p>
<p>　　　　<a href="#2410-%E5%B8%B8%E9%87%8F%E6%B3%A8%E9%87%8A">2.4.10 常量注释</a></p>
<p>　　　　<a href="#2411-%E5%A4%8D%E6%9D%82%E7%B1%BB%E5%9E%8B%E6%B3%A8%E9%87%8A">2.4.11 复杂类型注释</a></p>
<p>　　　　<a href="#2412-amd-%E6%A8%A1%E5%9D%97%E6%B3%A8%E9%87%8A">2.4.12 AMD 模块注释</a></p>
<p>　　　　<a href="#2413-%E7%BB%86%E8%8A%82%E6%B3%A8%E9%87%8A">2.4.13 细节注释</a></p>
<p><a href="#3-%E8%AF%AD%E8%A8%80%E7%89%B9%E6%80%A7">3 语言特性</a></p>
<p>　　<a href="#31-%E5%8F%98%E9%87%8F">3.1 变量</a></p>
<p>　　<a href="#32-%E6%9D%A1%E4%BB%B6">3.2 条件</a></p>
<p>　　<a href="#33-%E5%BE%AA%E7%8E%AF">3.3 循环</a></p>
<p>　　<a href="#34-%E7%B1%BB%E5%9E%8B">3.4 类型</a></p>
<p>　　　　<a href="#341-%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B">3.4.1 类型检测</a></p>
<p>　　　　<a href="#342-%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2">3.4.2 类型转换</a></p>
<p>　　<a href="#35-%E5%AD%97%E7%AC%A6%E4%B8%B2">3.5 字符串</a></p>
<p>　　<a href="#36-%E5%AF%B9%E8%B1%A1">3.6 对象</a></p>
<p>　　<a href="#37-%E6%95%B0%E7%BB%84">3.7 数组</a></p>
<p>　　<a href="#38-%E5%87%BD%E6%95%B0">3.8 函数</a></p>
<p>　　　　<a href="#381-%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6">3.8.1 函数长度</a></p>
<p>　　　　<a href="#382-%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1">3.8.2 参数设计</a></p>
<p>　　　　<a href="#383-%E9%97%AD%E5%8C%85">3.8.3 闭包</a></p>
<p>　　　　<a href="#384-%E7%A9%BA%E5%87%BD%E6%95%B0">3.8.4 空函数</a></p>
<p>　　<a href="#39-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1">3.9 面向对象</a></p>
<p>　　<a href="#310-%E5%8A%A8%E6%80%81%E7%89%B9%E6%80%A7">3.10 动态特性</a></p>
<p>　　　　<a href="#3101-eval">3.10.1 eval</a></p>
<p>　　　　<a href="#3102-%E5%8A%A8%E6%80%81%E6%89%A7%E8%A1%8C%E4%BB%A3%E7%A0%81">3.10.2 动态执行代码</a></p>
<p>　　　　<a href="#3103-with">3.10.3 with</a></p>
<p>　　　　<a href="#3104-delete">3.10.4 delete</a></p>
<p>　　　　<a href="#3105-%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7">3.10.5 对象属性</a></p>
<p><a href="#4-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83">4 浏览器环境</a></p>
<p>　　<a href="#41-%E6%A8%A1%E5%9D%97%E5%8C%96">4.1 模块化</a></p>
<p>　　　　<a href="#411-amd">4.1.1 AMD</a></p>
<p>　　　　<a href="#412-define">4.1.2 define</a></p>
<p>　　　　<a href="#413-require">4.1.3 require</a></p>
<p>　　<a href="#42-dom">4.2 DOM</a></p>
<p>　　　　<a href="#421-%E5%85%83%E7%B4%A0%E8%8E%B7%E5%8F%96">4.2.1 元素获取</a></p>
<p>　　　　<a href="#422-%E6%A0%B7%E5%BC%8F%E8%8E%B7%E5%8F%96">4.2.2 样式获取</a></p>
<p>　　　　<a href="#423-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">4.2.3 样式设置</a></p>
<p>　　　　<a href="#424-dom-%E6%93%8D%E4%BD%9C">4.2.4 DOM 操作</a></p>
<p>　　　　<a href="#425-dom-%E4%BA%8B%E4%BB%B6">4.2.5 DOM 事件</a></p>
<h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1 前言"></a>1 前言</h2><p>JavaScript在百度一直有着广泛的应用，特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。</p>
<p>虽然本文档是针对JavaScript设计的，但是在使用各种JavaScript的预编译语言时(如TypeScript等)时，适用的部分也应尽量遵循本文档的约定。</p>
<h2 id="2-代码风格"><a href="#2-代码风格" class="headerlink" title="2 代码风格"></a>2 代码风格</h2><h3 id="2-1-文件"><a href="#2-1-文件" class="headerlink" title="2.1 文件"></a>2.1 文件</h3><h5 id="建议-JavaScript-文件使用无-BOM-的-UTF-8-编码。"><a href="#建议-JavaScript-文件使用无-BOM-的-UTF-8-编码。" class="headerlink" title="[建议] JavaScript 文件使用无 BOM 的 UTF-8 编码。"></a>[建议] <code>JavaScript</code> 文件使用无 <code>BOM</code> 的 <code>UTF-8</code> 编码。</h5><p>解释：</p>
<p>UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。</p>
<h5 id="建议-在文件结尾处，保留一个空行。"><a href="#建议-在文件结尾处，保留一个空行。" class="headerlink" title="[建议] 在文件结尾处，保留一个空行。"></a>[建议] 在文件结尾处，保留一个空行。</h5><h3 id="2-2-结构"><a href="#2-2-结构" class="headerlink" title="2.2 结构"></a>2.2 结构</h3><h4 id="2-2-1-缩进"><a href="#2-2-1-缩进" class="headerlink" title="2.2.1 缩进"></a>2.2.1 缩进</h4><h5 id="强制-使用-4-个空格做为一个缩进层级，不允许使用-2-个空格-或-tab-字符。"><a href="#强制-使用-4-个空格做为一个缩进层级，不允许使用-2-个空格-或-tab-字符。" class="headerlink" title="[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。"></a>[强制] 使用 <code>4</code> 个空格做为一个缩进层级，不允许使用 <code>2</code> 个空格 或 <code>tab</code> 字符。</h5><h5 id="强制-switch-下的-case-和-default-必须增加一个缩进层级。"><a href="#强制-switch-下的-case-和-default-必须增加一个缩进层级。" class="headerlink" title="[强制] switch 下的 case 和 default 必须增加一个缩进层级。"></a>[强制] <code>switch</code> 下的 <code>case</code> 和 <code>default</code> 必须增加一个缩进层级。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">switch</span> (variable) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">'1'</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">'2'</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">switch</span> (variable) &#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">case</span> <span class="string">'1'</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">case</span> <span class="string">'2'</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">default</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-2-2-空格"><a href="#2-2-2-空格" class="headerlink" title="2.2.2 空格"></a>2.2.2 空格</h4><h5 id="强制-二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。"><a href="#强制-二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。" class="headerlink" title="[强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。"></a>[强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = !arr.length;</span><br><span class="line">a++;</span><br><span class="line">a = b + c;</span><br></pre></td></tr></table></figure>

<h5 id="强制-用作代码块起始的左花括号-前必须有一个空格。"><a href="#强制-用作代码块起始的左花括号-前必须有一个空格。" class="headerlink" title="[强制] 用作代码块起始的左花括号 { 前必须有一个空格。"></a>[强制] 用作代码块起始的左花括号 <code>{</code> 前必须有一个空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (condition)&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition)&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-if-else-for-while-function-switch-do-try-catch-finally-关键字后，必须有一个空格。"><a href="#强制-if-else-for-while-function-switch-do-try-catch-finally-关键字后，必须有一个空格。" class="headerlink" title="[强制] if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。"></a>[强制] <code>if / else / for / while / function / switch / do / try / catch / finally</code> 关键字后，必须有一个空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span>(condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span>(condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h5 id="强制-在对象创建时，属性中的-之后必须有空格，-之前不允许有空格。"><a href="#强制-在对象创建时，属性中的-之后必须有空格，-之前不允许有空格。" class="headerlink" title="[强制] 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。"></a>[强制] 在对象创建时，属性中的 <code>:</code> 之后必须有空格，<code>:</code> 之前不允许有空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a : <span class="number">1</span>,</span><br><span class="line">    b:<span class="number">2</span>,</span><br><span class="line">    c :<span class="number">3</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数声明、具名函数表达式、函数调用中，函数名和-之间不允许有空格。"><a href="#强制-函数声明、具名函数表达式、函数调用中，函数名和-之间不允许有空格。" class="headerlink" title="[强制] 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。"></a>[强制] 函数声明、具名函数表达式、函数调用中，函数名和 <code>(</code> 之间不允许有空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">funcName();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">funcName ();</span><br></pre></td></tr></table></figure>

<h5 id="强制-和-前不允许有空格。"><a href="#强制-和-前不允许有空格。" class="headerlink" title="[强制] , 和 ; 前不允许有空格。"></a>[强制] <code>,</code> 和 <code>;</code> 前不允许有空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">callFunc(a, b);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">callFunc(a , b) ;</span><br></pre></td></tr></table></figure>

<h5 id="强制-在函数调用、函数声明、括号表达式、属性访问、if-for-while-switch-catch-等语句中，-和-内紧贴括号部分不允许有空格。"><a href="#强制-在函数调用、函数声明、括号表达式、属性访问、if-for-while-switch-catch-等语句中，-和-内紧贴括号部分不允许有空格。" class="headerlink" title="[强制] 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格。"></a>[强制] 在函数调用、函数声明、括号表达式、属性访问、<code>if / for / while / switch / catch</code> 等语句中，<code>()</code> 和 <code>[]</code> 内紧贴括号部分不允许有空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"></span><br><span class="line">callFunc(param1, param2, param3);</span><br><span class="line"></span><br><span class="line">save(<span class="keyword">this</span>.list[<span class="keyword">this</span>.indexes[i]]);</span><br><span class="line"></span><br><span class="line">needIncream &amp;&amp; (variable += increament);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (num &gt; list.length) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"></span><br><span class="line">callFunc( param1, param2, param3 );</span><br><span class="line"></span><br><span class="line">save( <span class="keyword">this</span>.list[ <span class="keyword">this</span>.indexes[ i ] ] );</span><br><span class="line"></span><br><span class="line">needIncreament &amp;&amp; ( variable += increament );</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> ( num &gt; list.length ) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> ( len-- ) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-单行声明的数组与对象，如果包含元素，-和-内紧贴括号部分不允许包含空格。"><a href="#强制-单行声明的数组与对象，如果包含元素，-和-内紧贴括号部分不允许包含空格。" class="headerlink" title="[强制] 单行声明的数组与对象，如果包含元素，{} 和 [] 内紧贴括号部分不允许包含空格。"></a>[强制] 单行声明的数组与对象，如果包含元素，<code>{}</code> 和 <code>[]</code> 内紧贴括号部分不允许包含空格。</h5><p>解释：</p>
<p>声明包含元素的数组与对象，只有当内部元素的形式较为简单时，才允许写在一行。元素复杂的情况，还是应该换行书写。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;<span class="attr">name</span>: <span class="string">'obj'</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> obj3 = &#123;</span><br><span class="line">    name: <span class="string">'obj'</span>,</span><br><span class="line">    age: <span class="number">20</span>,</span><br><span class="line">    sex: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [ ];</span><br><span class="line"><span class="keyword">var</span> arr2 = [ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span> ];</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123; &#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123; <span class="attr">name</span>: <span class="string">'obj'</span> &#125;;</span><br><span class="line"><span class="keyword">var</span> obj3 = &#123;<span class="attr">name</span>: <span class="string">'obj'</span>, <span class="attr">age</span>: <span class="number">20</span>, <span class="attr">sex</span>: <span class="number">1</span>&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-行尾不得有多余的空格。"><a href="#强制-行尾不得有多余的空格。" class="headerlink" title="[强制] 行尾不得有多余的空格。"></a>[强制] 行尾不得有多余的空格。</h5><h4 id="2-2-3-换行"><a href="#2-2-3-换行" class="headerlink" title="2.2.3 换行"></a>2.2.3 换行</h4><h5 id="强制-每个独立语句结束后必须换行。"><a href="#强制-每个独立语句结束后必须换行。" class="headerlink" title="[强制] 每个独立语句结束后必须换行。"></a>[强制] 每个独立语句结束后必须换行。</h5><h5 id="强制-每行不得超过-120-个字符。"><a href="#强制-每行不得超过-120-个字符。" class="headerlink" title="[强制] 每行不得超过 120 个字符。"></a>[强制] 每行不得超过 <code>120</code> 个字符。</h5><p>解释：</p>
<p>超长的不可分割的代码允许例外，比如复杂的正则表达式。长字符串不在例外之列。</p>
<h5 id="强制-运算符处换行时，运算符必须在新行的行首。"><a href="#强制-运算符处换行时，运算符必须在新行的行首。" class="headerlink" title="[强制] 运算符处换行时，运算符必须在新行的行首。"></a>[强制] 运算符处换行时，运算符必须在新行的行首。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated()</span><br><span class="line">    &amp;&amp; user.isInRole(<span class="string">'admin'</span>)</span><br><span class="line">    &amp;&amp; user.hasAuthority(<span class="string">'add-admin'</span>)</span><br><span class="line">    || user.hasAuthority(<span class="string">'delete-admin'</span>)</span><br><span class="line">) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = number1 + number2 + number3</span><br><span class="line">    + number4 + number5;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated() &amp;&amp;</span><br><span class="line">    user.isInRole(<span class="string">'admin'</span>) &amp;&amp;</span><br><span class="line">    user.hasAuthority(<span class="string">'add-admin'</span>) ||</span><br><span class="line">    user.hasAuthority(<span class="string">'delete-admin'</span>)) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = number1 + number2 + number3 +</span><br><span class="line">    number4 + number5;</span><br></pre></td></tr></table></figure>

<h5 id="强制-在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在-或-前换行。"><a href="#强制-在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在-或-前换行。" class="headerlink" title="[强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在 , 或 ; 前换行。"></a>[强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在 <code>,</code> 或 <code>;</code> 前换行。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument,</span><br><span class="line">    anotherVeryLongArgument,</span><br><span class="line">    callback</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span></span><br><span class="line">    , <span class="attr">b</span>: <span class="number">2</span></span><br><span class="line">    , <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument</span><br><span class="line">    , anotherVeryLongArgument</span><br><span class="line">    , callback</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="建议-不同行为或逻辑的语句集，使用空行隔开，更易阅读。"><a href="#建议-不同行为或逻辑的语句集，使用空行隔开，更易阅读。" class="headerlink" title="[建议] 不同行为或逻辑的语句集，使用空行隔开，更易阅读。"></a>[建议] 不同行为或逻辑的语句集，使用空行隔开，更易阅读。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 仅为按逻辑换行的示例，不代表setStyle的最优实现</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setStyle</span>(<span class="params">element, property, value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (element == <span class="literal">null</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    element.style[property] = value;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-在语句的行长度超过-120-时，根据逻辑条件合理缩进。"><a href="#建议-在语句的行长度超过-120-时，根据逻辑条件合理缩进。" class="headerlink" title="[建议] 在语句的行长度超过 120 时，根据逻辑条件合理缩进。"></a>[建议] 在语句的行长度超过 <code>120</code> 时，根据逻辑条件合理缩进。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 较复杂的逻辑条件组合，将每个条件独立一行，逻辑运算符放置在行首进行分隔，或将部分逻辑按逻辑组合进行分隔。</span></span><br><span class="line"><span class="comment">// 建议最终将右括号 ) 与左大括号 &#123; 放在独立一行，保证与 if 内语句块能容易视觉辨识。</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated()</span><br><span class="line">    &amp;&amp; user.isInRole(<span class="string">'admin'</span>)</span><br><span class="line">    &amp;&amp; user.hasAuthority(<span class="string">'add-admin'</span>)</span><br><span class="line">    || user.hasAuthority(<span class="string">'delete-admin'</span>)</span><br><span class="line">) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按一定长度截断字符串，并使用 + 运算符进行连接。</span></span><br><span class="line"><span class="comment">// 分隔字符串尽量按语义进行，如不要在一个完整的名词中间断开。</span></span><br><span class="line"><span class="comment">// 特别的，对于HTML片段的拼接，通过缩进，保持和HTML相同的结构。</span></span><br><span class="line"><span class="keyword">var</span> html = <span class="string">''</span> <span class="comment">// 此处用一个空字符串，以便整个HTML片段都在新行严格对齐</span></span><br><span class="line">    + <span class="string">'&lt;article&gt;'</span></span><br><span class="line">    +     <span class="string">'&lt;h1&gt;Title here&lt;/h1&gt;'</span></span><br><span class="line">    +     <span class="string">'&lt;p&gt;This is a paragraph&lt;/p&gt;'</span></span><br><span class="line">    +     <span class="string">'&lt;footer&gt;Complete&lt;/footer&gt;'</span></span><br><span class="line">    + <span class="string">'&lt;/article&gt;'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可使用数组来进行拼接，相对 + 更容易调整缩进。</span></span><br><span class="line"><span class="keyword">var</span> html = [</span><br><span class="line">    <span class="string">'&lt;article&gt;'</span>,</span><br><span class="line">        <span class="string">'&lt;h1&gt;Title here&lt;/h1&gt;'</span>,</span><br><span class="line">        <span class="string">'&lt;p&gt;This is a paragraph&lt;/p&gt;'</span>,</span><br><span class="line">        <span class="string">'&lt;footer&gt;Complete&lt;/footer&gt;'</span>,</span><br><span class="line">    <span class="string">'&lt;/article&gt;'</span></span><br><span class="line">];</span><br><span class="line">html = html.join(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当参数过多时，将每个参数独立写在一行上，并将结束的右括号 ) 独立一行。</span></span><br><span class="line"><span class="comment">// 所有参数必须增加一个缩进。</span></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument,</span><br><span class="line">    anotherVeryLongArgument,</span><br><span class="line">    callback</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可以按逻辑对参数进行组合。</span></span><br><span class="line"><span class="comment">// 最经典的是baidu.format函数，调用时将参数分为“模板”和“数据”两块</span></span><br><span class="line">baidu.format(</span><br><span class="line">    dateFormatTemplate,</span><br><span class="line">    year, month, date, hour, minute, second</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当函数调用时，如果有一个或以上参数跨越多行，应当每一个参数独立一行。</span></span><br><span class="line"><span class="comment">// 这通常出现在匿名函数或者对象初始化等作为参数时，如setTimeout函数等。</span></span><br><span class="line">setTimeout(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        alert(<span class="string">'hello'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">200</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line">order.data.read(</span><br><span class="line">    <span class="string">'id='</span> + me.model.id,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">        me.attchToModel(data.result);</span><br><span class="line">        callback();</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">300</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 链式调用较长时采用缩进进行调整。</span></span><br><span class="line">$(<span class="string">'#items'</span>)</span><br><span class="line">    .find(<span class="string">'.selected'</span>)</span><br><span class="line">    .highlight()</span><br><span class="line">    .end();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三元运算符由3部分组成，因此其换行应当根据每个部分的长度不同，形成不同的情况。</span></span><br><span class="line"><span class="keyword">var</span> result = thisIsAVeryVeryLongCondition</span><br><span class="line">    ? resultA : resultB;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = condition</span><br><span class="line">    ? thisIsAVeryVeryLongResult</span><br><span class="line">    : resultB;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组和对象初始化的混用，严格按照每个对象的 &#123; 和结束 &#125; 在独立一行的风格书写。</span></span><br><span class="line"><span class="keyword">var</span> array = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于-if-else-、try-catch-finally-等语句，推荐使用在-号后添加一个换行-的风格，使代码层次结构更清晰，阅读性更好。"><a href="#建议-对于-if-else-、try-catch-finally-等语句，推荐使用在-号后添加一个换行-的风格，使代码层次结构更清晰，阅读性更好。" class="headerlink" title="[建议] 对于 if...else...、try...catch...finally 等语句，推荐使用在 } 号后添加一个换行 的风格，使代码层次结构更清晰，阅读性更好。"></a>[建议] 对于 <code>if...else...</code>、<code>try...catch...finally</code> 等语句，推荐使用在 <code>}</code> 号后添加一个换行 的风格，使代码层次结构更清晰，阅读性更好。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span> (ex) &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="2-2-4-语句"><a href="#2-2-4-语句" class="headerlink" title="2.2.4 语句"></a>2.2.4 语句</h4><h5 id="强制-不得省略语句结束的分号。"><a href="#强制-不得省略语句结束的分号。" class="headerlink" title="[强制] 不得省略语句结束的分号。"></a>[强制] 不得省略语句结束的分号。</h5><h5 id="强制-在-if-else-for-do-while-语句中，即使只有一行，也不得省略块-。"><a href="#强制-在-if-else-for-do-while-语句中，即使只有一行，也不得省略块-。" class="headerlink" title="[强制] 在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}。"></a>[强制] 在 <code>if / else / for / do / while</code> 语句中，即使只有一行，也不得省略块 <code>{...}</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    callFunc();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (condition) callFunc();</span><br><span class="line"><span class="keyword">if</span> (condition)</span><br><span class="line">    callFunc();</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数定义结束不允许添加分号。"><a href="#强制-函数定义结束不允许添加分号。" class="headerlink" title="[强制] 函数定义结束不允许添加分号。"></a>[强制] 函数定义结束不允许添加分号。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是函数表达式，分号是不允许省略的。</span></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-IIFE-必须在函数表达式外添加-，非-IIFE-不得在函数表达式外添加-。"><a href="#强制-IIFE-必须在函数表达式外添加-，非-IIFE-不得在函数表达式外添加-。" class="headerlink" title="[强制] IIFE 必须在函数表达式外添加 (，非 IIFE 不得在函数表达式外添加 (。"></a>[强制] <code>IIFE</code> 必须在函数表达式外添加 <code>(</code>，非 <code>IIFE</code> 不得在函数表达式外添加 <code>(</code>。</h5><p>解释：</p>
<p>IIFE = Immediately-Invoked Function Expression.</p>
<p>额外的 ( 能够让代码在阅读的一开始就能判断函数是否立即被调用，进而明白接下来代码的用途。而不是一直拖到底部才恍然大悟。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> task = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">   <span class="comment">// Code</span></span><br><span class="line">   <span class="keyword">return</span> result;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> task = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>





<h3 id="2-3-命名"><a href="#2-3-命名" class="headerlink" title="2.3 命名"></a>2.3 命名</h3><h5 id="强制-变量-使用-Camel命名法。"><a href="#强制-变量-使用-Camel命名法。" class="headerlink" title="[强制] 变量 使用 Camel命名法。"></a>[强制] <code>变量</code> 使用 <code>Camel命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> loadingModules = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-常量-使用-全部字母大写，单词间下划线分隔-的命名方式。"><a href="#强制-常量-使用-全部字母大写，单词间下划线分隔-的命名方式。" class="headerlink" title="[强制] 常量 使用 全部字母大写，单词间下划线分隔 的命名方式。"></a>[强制] <code>常量</code> 使用 <code>全部字母大写，单词间下划线分隔</code> 的命名方式。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> HTML_ENTITY = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数-使用-Camel命名法。"><a href="#强制-函数-使用-Camel命名法。" class="headerlink" title="[强制] 函数 使用 Camel命名法。"></a>[强制] <code>函数</code> 使用 <code>Camel命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stringFormat</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数的-参数-使用-Camel命名法。"><a href="#强制-函数的-参数-使用-Camel命名法。" class="headerlink" title="[强制] 函数的 参数 使用 Camel命名法。"></a>[强制] 函数的 <code>参数</code> 使用 <code>Camel命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hear</span>(<span class="params">theBells</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h5 id="强制-类-使用-Pascal命名法。"><a href="#强制-类-使用-Pascal命名法。" class="headerlink" title="[强制] 类 使用 Pascal命名法。"></a>[强制] <code>类</code> 使用 <code>Pascal命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-类的-方法-属性-使用-Camel命名法。"><a href="#强制-类的-方法-属性-使用-Camel命名法。" class="headerlink" title="[强制] 类的 方法 / 属性 使用 Camel命名法。"></a>[强制] 类的 <code>方法 / 属性</code> 使用 <code>Camel命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">value, engine</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.value = value;</span><br><span class="line">    <span class="keyword">this</span>.engine = engine;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">TextNode.prototype.clone = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-枚举变量-使用-Pascal命名法，枚举的属性-使用-全部字母大写，单词间下划线分隔-的命名方式。"><a href="#强制-枚举变量-使用-Pascal命名法，枚举的属性-使用-全部字母大写，单词间下划线分隔-的命名方式。" class="headerlink" title="[强制] 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式。"></a>[强制] <code>枚举变量</code> 使用 <code>Pascal命名法</code>，<code>枚举的属性</code> 使用 <code>全部字母大写，单词间下划线分隔</code> 的命名方式。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> TargetState = &#123;</span><br><span class="line">    READING: <span class="number">1</span>,</span><br><span class="line">    READED: <span class="number">2</span>,</span><br><span class="line">    APPLIED: <span class="number">3</span>,</span><br><span class="line">    READY: <span class="number">4</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-命名空间-使用-Camel命名法。"><a href="#强制-命名空间-使用-Camel命名法。" class="headerlink" title="[强制] 命名空间 使用 Camel命名法。"></a>[强制] <code>命名空间</code> 使用 <code>Camel命名法</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">equipments.heavyWeapons = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。"><a href="#强制-由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。" class="headerlink" title="[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。"></a>[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">XMLParser</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insertHTML</span>(<span class="params">element, html</span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> httpRequest = <span class="keyword">new</span> HTTPRequest();</span><br></pre></td></tr></table></figure>

<h5 id="强制-类名-使用-名词。"><a href="#强制-类名-使用-名词。" class="headerlink" title="[强制] 类名 使用 名词。"></a>[强制] <code>类名</code> 使用 <code>名词</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Engine</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-函数名-使用-动宾短语。"><a href="#建议-函数名-使用-动宾短语。" class="headerlink" title="[建议] 函数名 使用 动宾短语。"></a>[建议] <code>函数名</code> 使用 <code>动宾短语</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">element</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-boolean-类型的变量使用-is-或-has-开头。"><a href="#建议-boolean-类型的变量使用-is-或-has-开头。" class="headerlink" title="[建议] boolean 类型的变量使用 is 或 has 开头。"></a>[建议] <code>boolean</code> 类型的变量使用 <code>is</code> 或 <code>has</code> 开头。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> isReady = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">var</span> hasMoreCommands = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>

<h5 id="建议-Promise对象-用-动宾短语的进行时-表达。"><a href="#建议-Promise对象-用-动宾短语的进行时-表达。" class="headerlink" title="[建议] Promise对象 用 动宾短语的进行时 表达。"></a>[建议] <code>Promise对象</code> 用 <code>动宾短语的进行时</code> 表达。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> loadingData = ajax.get(<span class="string">'url'</span>);</span><br><span class="line">loadingData.then(callback);</span><br></pre></td></tr></table></figure>




<h3 id="2-4-注释"><a href="#2-4-注释" class="headerlink" title="2.4 注释"></a>2.4 注释</h3><h4 id="2-4-1-单行注释"><a href="#2-4-1-单行注释" class="headerlink" title="2.4.1 单行注释"></a>2.4.1 单行注释</h4><h5 id="强制-必须独占一行。-后跟一个空格，缩进与下一行被注释说明的代码一致。"><a href="#强制-必须独占一行。-后跟一个空格，缩进与下一行被注释说明的代码一致。" class="headerlink" title="[强制] 必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。"></a>[强制] 必须独占一行。<code>//</code> 后跟一个空格，缩进与下一行被注释说明的代码一致。</h5><h4 id="2-4-2-多行注释"><a href="#2-4-2-多行注释" class="headerlink" title="2.4.2 多行注释"></a>2.4.2 多行注释</h4><h5 id="建议-避免使用-这样的多行注释。有多行注释内容时，使用多个单行注释。"><a href="#建议-避免使用-这样的多行注释。有多行注释内容时，使用多个单行注释。" class="headerlink" title="[建议] 避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。"></a>[建议] 避免使用 <code>/*...*/</code> 这样的多行注释。有多行注释内容时，使用多个单行注释。</h5><h4 id="2-4-3-文档化注释"><a href="#2-4-3-文档化注释" class="headerlink" title="2.4.3 文档化注释"></a>2.4.3 文档化注释</h4><h5 id="强制-为了便于代码阅读和自文档化，以下内容必须包含以-形式的块注释中。"><a href="#强制-为了便于代码阅读和自文档化，以下内容必须包含以-形式的块注释中。" class="headerlink" title="[强制] 为了便于代码阅读和自文档化，以下内容必须包含以 /**...*/ 形式的块注释中。"></a>[强制] 为了便于代码阅读和自文档化，以下内容必须包含以 <code>/**...*/</code> 形式的块注释中。</h5><p>解释：</p>
<ol>
<li>文件</li>
<li>namespace</li>
<li>类</li>
<li>函数或方法</li>
<li>类属性</li>
<li>事件</li>
<li>全局变量</li>
<li>常量</li>
<li>AMD 模块</li>
</ol>
<h5 id="强制-文档注释前必须空一行。"><a href="#强制-文档注释前必须空一行。" class="headerlink" title="[强制] 文档注释前必须空一行。"></a>[强制] 文档注释前必须空一行。</h5><h5 id="建议-自文档化的文档说明-what，而不是-how。"><a href="#建议-自文档化的文档说明-what，而不是-how。" class="headerlink" title="[建议] 自文档化的文档说明 what，而不是 how。"></a>[建议] 自文档化的文档说明 what，而不是 how。</h5><h4 id="2-4-4-类型定义"><a href="#2-4-4-类型定义" class="headerlink" title="2.4.4 类型定义"></a>2.4.4 类型定义</h4><h5 id="强制-类型定义都是以-开始-以-结束。"><a href="#强制-类型定义都是以-开始-以-结束。" class="headerlink" title="[强制] 类型定义都是以{开始, 以}结束。"></a>[强制] 类型定义都是以<code>{</code>开始, 以<code>}</code>结束。</h5><p>解释：</p>
<p>常用类型如：{string}, {number}, {boolean}, {Object}, {Function}, {RegExp}, {Array}, {Date}。</p>
<p>类型不仅局限于内置的类型，也可以是自定义的类型。比如定义了一个类 Developer，就可以使用它来定义一个参数和返回值的类型。</p>
<h5 id="强制-对于基本类型-string-number-boolean-，首字母必须小写。"><a href="#强制-对于基本类型-string-number-boolean-，首字母必须小写。" class="headerlink" title="[强制] 对于基本类型 {string}, {number}, {boolean}，首字母必须小写。"></a>[强制] 对于基本类型 {string}, {number}, {boolean}，首字母必须小写。</h5><table>
<thead>
<tr>
<th>类型定义</th>
<th>语法示例</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>String</td>
<td>{string}</td>
<td>–</td>
</tr>
<tr>
<td>Number</td>
<td>{number}</td>
<td>–</td>
</tr>
<tr>
<td>Boolean</td>
<td>{boolean}</td>
<td>–</td>
</tr>
<tr>
<td>Object</td>
<td>{Object}</td>
<td>–</td>
</tr>
<tr>
<td>Function</td>
<td>{Function}</td>
<td>–</td>
</tr>
<tr>
<td>RegExp</td>
<td>{RegExp}</td>
<td>–</td>
</tr>
<tr>
<td>Array</td>
<td>{Array}</td>
<td>–</td>
</tr>
<tr>
<td>Date</td>
<td>{Date}</td>
<td>–</td>
</tr>
<tr>
<td>单一类型集合</td>
<td>{Array.&lt;string&gt;}</td>
<td>string 类型的数组</td>
</tr>
<tr>
<td>多类型</td>
<td>{(number｜boolean)}</td>
<td>可能是 number 类型, 也可能是 boolean 类型</td>
</tr>
<tr>
<td>允许为null</td>
<td>{?number}</td>
<td>可能是 number, 也可能是 null</td>
</tr>
<tr>
<td>不允许为null</td>
<td>{!Object}</td>
<td>Object 类型, 但不是 null</td>
</tr>
<tr>
<td>Function类型</td>
<td>{function(number, boolean)}</td>
<td>函数, 形参类型</td>
</tr>
<tr>
<td>Function带返回值</td>
<td>{function(number, boolean):string}</td>
<td>函数, 形参, 返回值类型</td>
</tr>
<tr>
<td>参数可选</td>
<td>@param {string=} name</td>
<td>可选参数, =为类型后缀</td>
</tr>
<tr>
<td>可变参数</td>
<td>@param {…number} args</td>
<td>变长参数,  …为类型前缀</td>
</tr>
<tr>
<td>任意类型</td>
<td>{*}</td>
<td>任意类型</td>
</tr>
<tr>
<td>可选任意类型</td>
<td>@param {*=} name</td>
<td>可选参数，类型不限</td>
</tr>
<tr>
<td>可变任意类型</td>
<td>@param {…*} args</td>
<td>变长参数，类型不限</td>
</tr>
</tbody></table>
<h4 id="2-4-5-文件注释"><a href="#2-4-5-文件注释" class="headerlink" title="2.4.5 文件注释"></a>2.4.5 文件注释</h4><h5 id="强制-文件顶部必须包含文件注释，用-file-标识文件说明。"><a href="#强制-文件顶部必须包含文件注释，用-file-标识文件说明。" class="headerlink" title="[强制] 文件顶部必须包含文件注释，用 @file 标识文件说明。"></a>[强制] 文件顶部必须包含文件注释，用 <code>@file</code> 标识文件说明。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@file </span>Describe the file</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>

<h5 id="建议-文件注释中可以用-author-标识开发者信息。"><a href="#建议-文件注释中可以用-author-标识开发者信息。" class="headerlink" title="[建议] 文件注释中可以用 @author 标识开发者信息。"></a>[建议] 文件注释中可以用 <code>@author</code> 标识开发者信息。</h5><p>解释：</p>
<p>开发者信息能够体现开发人员对文件的贡献，并且能够让遇到问题或希望了解相关信息的人找到维护人。通常情况文件在被创建时标识的是创建者。随着项目的进展，越来越多的人加入，参与这个文件的开发，新的作者应该被加入 <code>@author</code> 标识。</p>
<p><code>@author</code> 标识具有多人时，原则是按照 <code>责任</code> 进行排序。通常的说就是如果有问题，就是找第一个人应该比找第二个人有效。比如文件的创建者由于各种原因，模块移交给了其他人或其他团队，后来因为新增需求，其他人在新增代码时，添加 <code>@author</code> 标识应该把自己的名字添加在创建人的前面。</p>
<p><code>@author</code> 中的名字不允许被删除。任何劳动成果都应该被尊重。</p>
<p>业务项目中，一个文件可能被多人频繁修改，并且每个人的维护时间都可能不会很长，不建议为文件增加 <code>@author</code> 标识。通过版本控制系统追踪变更，按业务逻辑单元确定模块的维护责任人，通过文档与wiki跟踪和查询，是更好的责任管理方式。</p>
<p>对于业务逻辑无关的技术型基础项目，特别是开源的公共项目，应使用 <code>@author</code> 标识。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@file </span>Describe the file</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author <span class="variable">author</span></span>-name(mail-name<span class="doctag">@domain</span>.com)</span></span><br><span class="line"><span class="comment"> *         author-name2(mail-name2<span class="doctag">@domain</span>.com)</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>

<h4 id="2-4-6-命名空间注释"><a href="#2-4-6-命名空间注释" class="headerlink" title="2.4.6 命名空间注释"></a>2.4.6 命名空间注释</h4><h5 id="建议-命名空间使用-namespace-标识。"><a href="#建议-命名空间使用-namespace-标识。" class="headerlink" title="[建议] 命名空间使用 @namespace 标识。"></a>[建议] 命名空间使用 <code>@namespace</code> 标识。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@namespace</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> util = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="2-4-7-类注释"><a href="#2-4-7-类注释" class="headerlink" title="2.4.7 类注释"></a>2.4.7 类注释</h4><h5 id="建议-使用-class-标记类或构造函数。"><a href="#建议-使用-class-标记类或构造函数。" class="headerlink" title="[建议] 使用 @class 标记类或构造函数。"></a>[建议] 使用 <code>@class</code> 标记类或构造函数。</h5><p>解释：</p>
<p>对于使用对象 <code>constructor</code> 属性来定义的构造函数，可以使用 <code>@constructor</code> 来标记。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Developer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-使用-extends-标记类的继承信息。"><a href="#建议-使用-extends-标记类的继承信息。" class="headerlink" title="[建议] 使用 @extends 标记类的继承信息。"></a>[建议] 使用 <code>@extends</code> 标记类的继承信息。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fronteer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="keyword">this</span>);</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br><span class="line">util.inherits(Fronteer, Developer);</span><br></pre></td></tr></table></figure>

<h5 id="强制-使用包装方式扩展类成员时，-必须通过-lends-进行重新指向。"><a href="#强制-使用包装方式扩展类成员时，-必须通过-lends-进行重新指向。" class="headerlink" title="[强制] 使用包装方式扩展类成员时， 必须通过 @lends 进行重新指向。"></a>[强制] 使用包装方式扩展类成员时， 必须通过 <code>@lends</code> 进行重新指向。</h5><p>解释：</p>
<p>没有 <code>@lends</code> 标记将无法为该类生成包含扩展类成员的文档。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 类描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fronteer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="keyword">this</span>);</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">util.extend(</span><br><span class="line">    Fronteer.prototype,</span><br><span class="line">    <span class="comment">/** <span class="doctag">@lends </span>Fronteer.prototype */</span>&#123;</span><br><span class="line">        _getLevel: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="强制-类的属性或方法等成员信息使用-public-protected-private-中的任意一个，指明可访问性。"><a href="#强制-类的属性或方法等成员信息使用-public-protected-private-中的任意一个，指明可访问性。" class="headerlink" title="[强制] 类的属性或方法等成员信息使用 @public / @protected / @private 中的任意一个，指明可访问性。"></a>[强制] 类的属性或方法等成员信息使用 <code>@public</code> / <code>@protected</code> / <code>@private</code> 中的任意一个，指明可访问性。</h5><p>解释：</p>
<p>生成的文档中将有可访问性的标记，避免用户直接使用非 <code>public</code> 的属性或方法。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 类描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> Fronteer = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 属性描述</span></span><br><span class="line"><span class="comment">     *</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@type <span class="type">&#123;string&#125;</span></span></span></span><br><span class="line"><span class="comment">     * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">this</span>._level = <span class="string">'T12'</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;;</span><br><span class="line">util.inherits(Fronteer, Developer);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 方法描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;string&#125;</span> </span>返回值描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Fronteer.prototype._getLevel = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h4 id="2-4-8-函数-方法注释"><a href="#2-4-8-函数-方法注释" class="headerlink" title="2.4.8 函数/方法注释"></a>2.4.8 函数/方法注释</h4><h5 id="强制-函数-方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。"><a href="#强制-函数-方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。" class="headerlink" title="[强制] 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。"></a>[强制] 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。</h5><h5 id="强制-参数和返回值注释必须包含类型信息和说明。"><a href="#强制-参数和返回值注释必须包含类型信息和说明。" class="headerlink" title="[强制] 参数和返回值注释必须包含类型信息和说明。"></a>[强制] 参数和返回值注释必须包含类型信息和说明。</h5><h5 id="建议-当函数是内部函数，外部不可访问时，可以使用-inner-标识。"><a href="#建议-当函数是内部函数，外部不可访问时，可以使用-inner-标识。" class="headerlink" title="[建议] 当函数是内部函数，外部不可访问时，可以使用 @inner 标识。"></a>[建议] 当函数是内部函数，外部不可访问时，可以使用 <code>@inner</code> 标识。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 函数描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>p1 参数1的说明</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>p2 参数2的说明，比较长</span></span><br><span class="line"><span class="comment"> *     那就换行了.</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;number=&#125;</span> </span>p3 参数3的说明（可选）</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;Object&#125;</span> </span>返回值描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">p1, p2, p3</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> p3 = p3 || <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        p1: p1,</span><br><span class="line">        p2: p2,</span><br><span class="line">        p3: p3</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-对-Object-中各项的描述，-必须使用-param-标识。"><a href="#强制-对-Object-中各项的描述，-必须使用-param-标识。" class="headerlink" title="[强制] 对 Object 中各项的描述， 必须使用 @param 标识。"></a>[强制] 对 Object 中各项的描述， 必须使用 <code>@param</code> 标识。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 函数描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>option 参数描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>option.url option项描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string=&#125;</span> </span>option.method option项描述，可选参数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">option</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-重写父类方法时，-应当添加-override-标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略-param、-return，仅用-override-标识，否则仍应作完整注释。"><a href="#建议-重写父类方法时，-应当添加-override-标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略-param、-return，仅用-override-标识，否则仍应作完整注释。" class="headerlink" title="[建议] 重写父类方法时， 应当添加 @override 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 @param、@return，仅用 @override 标识，否则仍应作完整注释。"></a>[建议] 重写父类方法时， 应当添加 <code>@override</code> 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 <code>@param</code>、<code>@return</code>，仅用 <code>@override</code> 标识，否则仍应作完整注释。</h5><p>解释：</p>
<p>简而言之，当子类重写的方法能直接套用父类的方法注释时可省略对参数与返回值的注释。</p>
<h4 id="2-4-9-事件注释"><a href="#2-4-9-事件注释" class="headerlink" title="2.4.9 事件注释"></a>2.4.9 事件注释</h4><h5 id="强制-必须使用-event-标识事件，事件参数的标识与方法描述的参数标识相同。"><a href="#强制-必须使用-event-标识事件，事件参数的标识与方法描述的参数标识相同。" class="headerlink" title="[强制] 必须使用 @event 标识事件，事件参数的标识与方法描述的参数标识相同。"></a>[强制] 必须使用 <code>@event</code> 标识事件，事件参数的标识与方法描述的参数标识相同。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 值变更时触发</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@event</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>e e描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.before before描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.after after描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">onchange: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-在会广播事件的函数前使用-fires-标识广播的事件，在广播事件代码前使用-event-标识事件。"><a href="#强制-在会广播事件的函数前使用-fires-标识广播的事件，在广播事件代码前使用-event-标识事件。" class="headerlink" title="[强制] 在会广播事件的函数前使用 @fires 标识广播的事件，在广播事件代码前使用 @event 标识事件。"></a>[强制] 在会广播事件的函数前使用 <code>@fires</code> 标识广播的事件，在广播事件代码前使用 <code>@event</code> 标识事件。</h5><h5 id="建议-对于事件对象的注释，使用-param-标识，生成文档时可读性更好。"><a href="#建议-对于事件对象的注释，使用-param-标识，生成文档时可读性更好。" class="headerlink" title="[建议] 对于事件对象的注释，使用 @param 标识，生成文档时可读性更好。"></a>[建议] 对于事件对象的注释，使用 <code>@param</code> 标识，生成文档时可读性更好。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 点击处理</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@fires </span>Select#change</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Select.prototype.clickHandler = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 值变更时触发</span></span><br><span class="line"><span class="comment">     *</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@event </span>Select#change</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>e e描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.before before描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.after after描述</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">this</span>.fire(</span><br><span class="line">        <span class="string">'change'</span>,</span><br><span class="line">        &#123;</span><br><span class="line">            before: <span class="string">'foo'</span>,</span><br><span class="line">            after: <span class="string">'bar'</span></span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="2-4-10-常量注释"><a href="#2-4-10-常量注释" class="headerlink" title="2.4.10 常量注释"></a>2.4.10 常量注释</h4><h5 id="强制-常量必须使用-const-标记，并包含说明和类型信息。"><a href="#强制-常量必须使用-const-标记，并包含说明和类型信息。" class="headerlink" title="[强制] 常量必须使用 @const 标记，并包含说明和类型信息。"></a>[强制] 常量必须使用 <code>@const</code> 标记，并包含说明和类型信息。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 常量说明</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@const</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type <span class="type">&#123;string&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> REQUEST_URL = <span class="string">'myurl.do'</span>;</span><br></pre></td></tr></table></figure>

<h4 id="2-4-11-复杂类型注释"><a href="#2-4-11-复杂类型注释" class="headerlink" title="2.4.11 复杂类型注释"></a>2.4.11 复杂类型注释</h4><h5 id="建议-对于类型未定义的复杂结构的注释，可以使用-typedef-标识来定义。"><a href="#建议-对于类型未定义的复杂结构的注释，可以使用-typedef-标识来定义。" class="headerlink" title="[建议] 对于类型未定义的复杂结构的注释，可以使用 @typedef 标识来定义。"></a>[建议] 对于类型未定义的复杂结构的注释，可以使用 <code>@typedef</code> 标识来定义。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// `namespaceA~` 可以换成其它 namepaths 前缀，目的是为了生成文档中能显示 `@typedef` 定义的类型和链接。</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 服务器</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@typedef <span class="type">&#123;Object&#125;</span> </span>namespaceA~Server</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@property <span class="type">&#123;string&#125;</span> </span>host 主机</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@property <span class="type">&#123;number&#125;</span> </span>port 端口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 服务器列表</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type <span class="type">&#123;Array.&lt;namespaceA~Server&gt;&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> servers = [</span><br><span class="line">    &#123;</span><br><span class="line">        host: <span class="string">'1.2.3.4'</span>,</span><br><span class="line">        port: <span class="number">8080</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        host: <span class="string">'1.2.3.5'</span>,</span><br><span class="line">        port: <span class="number">8081</span></span><br><span class="line">    &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure>


<h4 id="2-4-12-AMD-模块注释"><a href="#2-4-12-AMD-模块注释" class="headerlink" title="2.4.12 AMD 模块注释"></a>2.4.12 AMD 模块注释</h4><h5 id="强制-AMD-模块使用-module-或-exports-标识。"><a href="#强制-AMD-模块使用-module-或-exports-标识。" class="headerlink" title="[强制] AMD 模块使用 @module 或 @exports 标识。"></a>[强制] AMD 模块使用 <code>@module</code> 或 <code>@exports</code> 标识。</h5><p>解释：</p>
<p>@exports 与 @module 都可以用来标识模块，区别在于 @module 可以省略模块名称。而只使用 @exports 时在 namepaths 中可以省略 module: 前缀。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * foo description</span></span><br><span class="line"><span class="comment">         *</span></span><br><span class="line"><span class="comment">         * <span class="doctag">@exports <span class="variable">Foo</span></span></span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        <span class="keyword">var</span> foo = &#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * baz description</span></span><br><span class="line"><span class="comment">         *</span></span><br><span class="line"><span class="comment">         * <span class="doctag">@return <span class="type">&#123;boolean&#125;</span> </span>return description</span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        foo.baz = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> foo;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>也可以在 exports 变量前使用 @module 标识：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * module description.</span></span><br><span class="line"><span class="comment">         *</span></span><br><span class="line"><span class="comment">         * <span class="doctag">@module <span class="variable">foo</span></span></span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        <span class="keyword">var</span> exports = &#123;&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * bar description</span></span><br><span class="line"><span class="comment">         *</span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        exports.bar = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> exports;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>如果直接使用 factory 的 exports 参数，还可以：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * module description.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@module</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require, exports</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * bar description</span></span><br><span class="line"><span class="comment">         *</span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        exports.bar = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="keyword">return</span> exports;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="强制-对于已使用-module-标识为-AMD模块-的引用，在-namepaths-中必须增加-module-作前缀。"><a href="#强制-对于已使用-module-标识为-AMD模块-的引用，在-namepaths-中必须增加-module-作前缀。" class="headerlink" title="[强制] 对于已使用 @module 标识为 AMD模块 的引用，在 namepaths 中必须增加 module: 作前缀。"></a>[强制] 对于已使用 <code>@module</code> 标识为 AMD模块 的引用，在 <code>namepaths</code> 中必须增加 <code>module:</code> 作前缀。</h5><p>解释：</p>
<p>namepaths 没有 module: 前缀时，生成的文档中将无法正确生成链接。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 点击处理</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@fires </span>module:Select#change</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Select.prototype.clickHandler = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 值变更时触发</span></span><br><span class="line"><span class="comment">     *</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@event </span>module:Select#change</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>e e描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.before before描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.after after描述</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="keyword">this</span>.fire(</span><br><span class="line">        <span class="string">'change'</span>,</span><br><span class="line">        &#123;</span><br><span class="line">            before: <span class="string">'foo'</span>,</span><br><span class="line">            after: <span class="string">'bar'</span></span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于类定义的模块，可以使用-alias-标识构建函数。"><a href="#建议-对于类定义的模块，可以使用-alias-标识构建函数。" class="headerlink" title="[建议] 对于类定义的模块，可以使用 @alias 标识构建函数。"></a>[建议] 对于类定义的模块，可以使用 <code>@alias</code> 标识构建函数。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * A module representing a jacket.</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@module <span class="variable">jacket</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/**</span></span><br><span class="line"><span class="comment">         * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment">         * <span class="doctag">@alias </span>module:jacket</span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        <span class="keyword">var</span> Jacket = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> Jacket;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>


<h5 id="建议-多模块定义时，可以使用-exports-标识各个模块。"><a href="#建议-多模块定义时，可以使用-exports-标识各个模块。" class="headerlink" title="[建议] 多模块定义时，可以使用 @exports 标识各个模块。"></a>[建议] 多模块定义时，可以使用 <code>@exports</code> 标识各个模块。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// one module</span></span><br><span class="line">define(<span class="string">'html/utils'</span>,</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Utility functions to ease working with DOM elements.</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@exports </span>html/utils</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> exports = &#123;</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> exports;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// another module</span></span><br><span class="line">define(<span class="string">'tag'</span>,</span><br><span class="line">    <span class="comment">/** <span class="doctag">@exports </span>tag */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> exports = &#123;</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> exports;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于-exports-为-Object-的模块，可以使用-namespace标识。"><a href="#建议-对于-exports-为-Object-的模块，可以使用-namespace标识。" class="headerlink" title="[建议] 对于 exports 为 Object 的模块，可以使用@namespace标识。"></a>[建议] 对于 exports 为 Object 的模块，可以使用<code>@namespace</code>标识。</h5><p>解释：</p>
<p>使用 @namespace 而不是 @module 或 @exports 时，对模块的引用可以省略 module: 前缀。</p>
<h5 id="建议-对于-exports-为类名的模块，使用-class-和-exports-标识。"><a href="#建议-对于-exports-为类名的模块，使用-class-和-exports-标识。" class="headerlink" title="[建议] 对于 exports 为类名的模块，使用 @class 和 @exports 标识。"></a>[建议] 对于 exports 为类名的模块，使用 <code>@class</code> 和 <code>@exports</code> 标识。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 只使用 @class Bar 时，类方法和属性都必须增加 @name Bar#methodName 来标识，与 @exports 配合可以免除这一麻烦，并且在引用时可以省去 module: 前缀。</span></span><br><span class="line"><span class="comment">// 另外需要注意类名需要使用 var 定义的方式。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Bar description</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@see <span class="variable">foo</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@exports  <span class="variable">Bar</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> Bar = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * baz description</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;(string|Array)&#125;</span> </span>return description</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Bar.prototype.baz = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h4 id="2-4-13-细节注释"><a href="#2-4-13-细节注释" class="headerlink" title="2.4.13 细节注释"></a>2.4.13 细节注释</h4><p>对于内部实现、不容易理解的逻辑说明、摘要信息等，我们可能需要编写细节注释。</p>
<h4 id="建议-细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始。"><a href="#建议-细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始。" class="headerlink" title="[建议] 细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始。"></a>[建议] 细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始。</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">p1, p2, opt_p3</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 这里对具体内部逻辑进行说明</span></span><br><span class="line">    <span class="comment">// 说明太长需要换行</span></span><br><span class="line">    <span class="keyword">for</span> (...) &#123;</span><br><span class="line">        ....</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记："><a href="#强制-有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记：" class="headerlink" title="[强制] 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记："></a>[强制] 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记：</h5><p>解释：</p>
<ol>
<li>TODO: 有功能待实现。此时需要对将要实现的功能进行简单说明。</li>
<li>FIXME: 该处代码运行没问题，但可能由于时间赶或者其他原因，需要修正。此时需要对如何修正进行简单说明。</li>
<li>HACK: 为修正某些问题而写的不太好或者使用了某些诡异手段的代码。此时需要对思路或诡异手段进行描述。</li>
<li>XXX: 该处存在陷阱。此时需要对陷阱进行描述。</li>
</ol>
<h2 id="3-语言特性"><a href="#3-语言特性" class="headerlink" title="3 语言特性"></a>3 语言特性</h2><h3 id="3-1-变量"><a href="#3-1-变量" class="headerlink" title="3.1 变量"></a>3.1 变量</h3><h5 id="强制-变量在使用前必须通过-var-定义。"><a href="#强制-变量在使用前必须通过-var-定义。" class="headerlink" title="[强制] 变量在使用前必须通过 var 定义。"></a>[强制] 变量在使用前必须通过 <code>var</code> 定义。</h5><p>解释：</p>
<p>不通过 var 定义变量将导致变量污染全局环境。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">'MyName'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">name = <span class="string">'MyName'</span>;</span><br></pre></td></tr></table></figure>

<h5 id="强制-每个-var-只能声明一个变量。"><a href="#强制-每个-var-只能声明一个变量。" class="headerlink" title="[强制] 每个 var 只能声明一个变量。"></a>[强制] 每个 <code>var</code> 只能声明一个变量。</h5><p>解释：</p>
<p>一个 var 声明多个变量，容易导致较长的行长度，并且在修改时容易造成逗号和分号的混淆。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> hangModules = [];</span><br><span class="line"><span class="keyword">var</span> missModules = [];</span><br><span class="line"><span class="keyword">var</span> visited = &#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> hangModules = [],</span><br><span class="line">    missModules = [],</span><br><span class="line">    visited = &#123;&#125;;</span><br></pre></td></tr></table></figure>


<h5 id="强制-变量必须-即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。"><a href="#强制-变量必须-即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。" class="headerlink" title="[强制] 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。"></a>[强制] 变量必须 <code>即用即声明</code>，不得在函数或其它形式的代码块起始位置统一声明所有变量。</h5><p>解释：</p>
<p>变量声明与使用的距离越远，出现的跨度越大，代码的阅读与维护成本越高。虽然JavaScript的变量是函数作用域，还是应该根据编程中的意图，缩小变量出现的距离空间。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">kv2List</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> list = [];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> source) &#123;</span><br><span class="line">        <span class="keyword">if</span> (source.hasOwnProperty(key)) &#123;</span><br><span class="line">            <span class="keyword">var</span> item = &#123;</span><br><span class="line">                k: key,</span><br><span class="line">                v: source[key]</span><br><span class="line">            &#125;;</span><br><span class="line">            list.push(item);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> list;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">kv2List</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> list = [];</span><br><span class="line">    <span class="keyword">var</span> key;</span><br><span class="line">    <span class="keyword">var</span> item;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (key <span class="keyword">in</span> source) &#123;</span><br><span class="line">        <span class="keyword">if</span> (source.hasOwnProperty(key)) &#123;</span><br><span class="line">            item = &#123;</span><br><span class="line">                k: key,</span><br><span class="line">                v: source[key]</span><br><span class="line">            &#125;;</span><br><span class="line">            list.push(item);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> list;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>






<h3 id="3-2-条件"><a href="#3-2-条件" class="headerlink" title="3.2 条件"></a>3.2 条件</h3><h5 id="强制-在-Equality-Expression-中使用类型严格的-。仅当判断-null-或-undefined-时，允许使用-null。"><a href="#强制-在-Equality-Expression-中使用类型严格的-。仅当判断-null-或-undefined-时，允许使用-null。" class="headerlink" title="[强制] 在 Equality Expression 中使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null。"></a>[强制] 在 Equality Expression 中使用类型严格的 <code>===</code>。仅当判断 null 或 undefined 时，允许使用 <code>== null</code>。</h5><p>解释：</p>
<p>使用 === 可以避免等于判断中隐式的类型转换。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (age === <span class="number">30</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (age == <span class="number">30</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-尽可能使用简洁的表达式。"><a href="#建议-尽可能使用简洁的表达式。" class="headerlink" title="[建议] 尽可能使用简洁的表达式。"></a>[建议] 尽可能使用简洁的表达式。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串为空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (!name) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (name === <span class="string">''</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串非空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (name) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (name !== <span class="string">''</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组非空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (collection.length) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (collection.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 布尔不成立</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (!notTrue) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (notTrue === <span class="literal">false</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// null 或 undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (noValue == <span class="literal">null</span>) &#123;</span><br><span class="line">  <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (noValue === <span class="literal">null</span> || <span class="keyword">typeof</span> noValue === <span class="string">'undefined'</span>) &#123;</span><br><span class="line">  <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h5 id="建议-按执行频率排列分支的顺序。"><a href="#建议-按执行频率排列分支的顺序。" class="headerlink" title="[建议] 按执行频率排列分支的顺序。"></a>[建议] 按执行频率排列分支的顺序。</h5><p>解释：</p>
<p>按执行频率排列分支的顺序好处是：</p>
<ol>
<li>阅读的人容易找到最常见的情况，增加可读性。</li>
<li>提高执行效率。</li>
</ol>
<h5 id="建议-对于相同变量或表达式的多值条件，用-switch-代替-if。"><a href="#建议-对于相同变量或表达式的多值条件，用-switch-代替-if。" class="headerlink" title="[建议] 对于相同变量或表达式的多值条件，用 switch 代替 if。"></a>[建议] 对于相同变量或表达式的多值条件，用 <code>switch</code> 代替 <code>if</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">switch</span> (<span class="keyword">typeof</span> variable) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'object'</span>:</span><br><span class="line">        <span class="comment">// ......</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'number'</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'boolean'</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'string'</span>:</span><br><span class="line">        <span class="comment">// ......</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> type = <span class="keyword">typeof</span> variable;</span><br><span class="line"><span class="keyword">if</span> (type === <span class="string">'object'</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> (type === <span class="string">'number'</span> || type === <span class="string">'boolean'</span> || type === <span class="string">'string'</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-如果函数或全局中的-else-块后没有任何语句，可以删除-else。"><a href="#建议-如果函数或全局中的-else-块后没有任何语句，可以删除-else。" class="headerlink" title="[建议] 如果函数或全局中的 else 块后没有任何语句，可以删除 else。"></a>[建议] 如果函数或全局中的 <code>else</code> 块后没有任何语句，可以删除 <code>else</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (name) &#123;</span><br><span class="line">        <span class="keyword">return</span> name;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="string">'unnamed'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (name) &#123;</span><br><span class="line">        <span class="keyword">return</span> name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'unnamed'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h3 id="3-3-循环"><a href="#3-3-循环" class="headerlink" title="3.3 循环"></a>3.3 循环</h3><h5 id="建议-不要在循环体中包含函数表达式，事先将函数提取到循环体外。"><a href="#建议-不要在循环体中包含函数表达式，事先将函数提取到循环体外。" class="headerlink" title="[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外。"></a>[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外。</h5><p>解释：</p>
<p>循环体中的函数表达式，运行过程中会生成循环次数个函数对象。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clicker</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    addListener(element, <span class="string">'click'</span>, clicker);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    addListener(element, <span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对循环内多次使用的不变值，在循环外用变量缓存。"><a href="#建议-对循环内多次使用的不变值，在循环外用变量缓存。" class="headerlink" title="[建议] 对循环内多次使用的不变值，在循环外用变量缓存。"></a>[建议] 对循环内多次使用的不变值，在循环外用变量缓存。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> width = wrap.offsetWidth + <span class="string">'px'</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    element.style.width = width;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    element.style.width = wrap.offsetWidth + <span class="string">'px'</span>;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h5 id="建议-对有序集合进行遍历时，缓存-length。"><a href="#建议-对有序集合进行遍历时，缓存-length。" class="headerlink" title="[建议] 对有序集合进行遍历时，缓存 length。"></a>[建议] 对有序集合进行遍历时，缓存 <code>length</code>。</h5><p>解释：</p>
<p>虽然现代浏览器都对数组长度进行了缓存，但对于一些宿主对象和老旧浏览器的数组对象，在每次 length 访问时会动态计算元素个数，此时缓存 length 能有效提高程序性能。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对有序集合进行顺序无关的遍历时，使用逆序遍历。"><a href="#建议-对有序集合进行顺序无关的遍历时，使用逆序遍历。" class="headerlink" title="[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历。"></a>[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历。</h5><p>解释：</p>
<p>逆序遍历可以节省变量，代码比较优化。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> len = elements.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[len];</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h3 id="3-4-类型"><a href="#3-4-类型" class="headerlink" title="3.4 类型"></a>3.4 类型</h3><h4 id="3-4-1-类型检测"><a href="#3-4-1-类型检测" class="headerlink" title="3.4.1 类型检测"></a>3.4.1 类型检测</h4><h5 id="建议-类型检测优先使用-typeof。对象类型检测使用-instanceof。null-或-undefined-的检测使用-null。"><a href="#建议-类型检测优先使用-typeof。对象类型检测使用-instanceof。null-或-undefined-的检测使用-null。" class="headerlink" title="[建议] 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。"></a>[建议] 类型检测优先使用 <code>typeof</code>。对象类型检测使用 <code>instanceof</code>。<code>null</code> 或 <code>undefined</code> 的检测使用 <code>== null</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// string</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'string'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// number</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'number'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// boolean</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'boolean'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Function</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'function'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'object'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// RegExp</span></span><br><span class="line">variable <span class="keyword">instanceof</span> <span class="built_in">RegExp</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Array</span></span><br><span class="line">variable <span class="keyword">instanceof</span> <span class="built_in">Array</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// null</span></span><br><span class="line">variable === <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// null or undefined</span></span><br><span class="line">variable == <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">'undefined'</span></span><br></pre></td></tr></table></figure>


<h4 id="3-4-2-类型转换"><a href="#3-4-2-类型转换" class="headerlink" title="3.4.2 类型转换"></a>3.4.2 类型转换</h4><h5 id="建议-转换成-string-时，使用-39-39-。"><a href="#建议-转换成-string-时，使用-39-39-。" class="headerlink" title="[建议] 转换成 string 时，使用 + &#39;&#39;。"></a>[建议] 转换成 <code>string</code> 时，使用 <code>+ &#39;&#39;</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">num + <span class="string">''</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">String</span>(num);</span><br><span class="line">num.toString();</span><br><span class="line"><span class="built_in">String</span>(num);</span><br></pre></td></tr></table></figure>

<h5 id="建议-转换成-number-时，通常使用-。"><a href="#建议-转换成-number-时，通常使用-。" class="headerlink" title="[建议] 转换成 number 时，通常使用 +。"></a>[建议] 转换成 <code>number</code> 时，通常使用 <code>+</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">+str;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="built_in">Number</span>(str);</span><br></pre></td></tr></table></figure>

<h5 id="建议-string-转换成-number，要转换的字符串结尾包含非数字并期望忽略时，使用-parseInt。"><a href="#建议-string-转换成-number，要转换的字符串结尾包含非数字并期望忽略时，使用-parseInt。" class="headerlink" title="[建议] string 转换成 number，要转换的字符串结尾包含非数字并期望忽略时，使用 parseInt。"></a>[建议] <code>string</code> 转换成 <code>number</code>，要转换的字符串结尾包含非数字并期望忽略时，使用 <code>parseInt</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> width = <span class="string">'200px'</span>;</span><br><span class="line"><span class="built_in">parseInt</span>(width, <span class="number">10</span>);</span><br></pre></td></tr></table></figure>

<h5 id="强制-使用-parseInt-时，必须指定进制。"><a href="#强制-使用-parseInt-时，必须指定进制。" class="headerlink" title="[强制] 使用 parseInt 时，必须指定进制。"></a>[强制] 使用 <code>parseInt</code> 时，必须指定进制。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="built_in">parseInt</span>(str, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="built_in">parseInt</span>(str);</span><br></pre></td></tr></table></figure>

<h5 id="建议-转换成-boolean-时，使用-。"><a href="#建议-转换成-boolean-时，使用-。" class="headerlink" title="[建议] 转换成 boolean 时，使用 !!。"></a>[建议] 转换成 <code>boolean</code> 时，使用 <code>!!</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line">!!num;</span><br></pre></td></tr></table></figure>

<h5 id="建议-number-去除小数点，使用-Math-floor-Math-round-Math-ceil，不使用-parseInt。"><a href="#建议-number-去除小数点，使用-Math-floor-Math-round-Math-ceil，不使用-parseInt。" class="headerlink" title="[建议] number 去除小数点，使用 Math.floor / Math.round / Math.ceil，不使用 parseInt。"></a>[建议] <code>number</code> 去除小数点，使用 <code>Math.floor / Math.round / Math.ceil</code>，不使用 <code>parseInt</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line"><span class="built_in">Math</span>.ceil(num);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line"><span class="built_in">parseInt</span>(num, <span class="number">10</span>);</span><br></pre></td></tr></table></figure>




<h3 id="3-5-字符串"><a href="#3-5-字符串" class="headerlink" title="3.5 字符串"></a>3.5 字符串</h3><h5 id="强制-字符串开头和结束使用单引号-39-。"><a href="#强制-字符串开头和结束使用单引号-39-。" class="headerlink" title="[强制] 字符串开头和结束使用单引号 &#39;。"></a>[强制] 字符串开头和结束使用单引号 <code>&#39;</code>。</h5><p>解释：</p>
<ol>
<li>输入单引号不需要按住 shift，方便输入。</li>
<li>实际使用中，字符串经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。</li>
</ol>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'我是一个字符串'</span>;</span><br><span class="line"><span class="keyword">var</span> html = <span class="string">'&lt;div class="cls"&gt;拼接HTML可以省去双引号转义&lt;/div&gt;'</span>;</span><br></pre></td></tr></table></figure>

<h5 id="建议-使用-数组-或-拼接字符串。"><a href="#建议-使用-数组-或-拼接字符串。" class="headerlink" title="[建议] 使用 数组 或 + 拼接字符串。"></a>[建议] 使用 <code>数组</code> 或 <code>+</code> 拼接字符串。</h5><p>解释：</p>
<ol>
<li>使用 + 拼接字符串，如果拼接的全部是 StringLiteral，压缩工具可以对其进行自动合并的优化。所以，静态字符串建议使用 + 拼接。</li>
<li>在现代浏览器下，使用 + 拼接字符串，性能较数组的方式要高。</li>
<li>如需要兼顾老旧浏览器，应尽量使用数组拼接字符串。</li>
</ol>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用数组拼接字符串</span></span><br><span class="line"><span class="keyword">var</span> str = [</span><br><span class="line">    <span class="comment">// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.</span></span><br><span class="line">    <span class="string">'&lt;ul&gt;'</span>,</span><br><span class="line">        <span class="string">'&lt;li&gt;第一项&lt;/li&gt;'</span>,</span><br><span class="line">        <span class="string">'&lt;li&gt;第二项&lt;/li&gt;'</span>,</span><br><span class="line">    <span class="string">'&lt;/ul&gt;'</span></span><br><span class="line">].join(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 + 拼接字符串</span></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">''</span> <span class="comment">// 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读</span></span><br><span class="line">    + <span class="string">'&lt;ul&gt;'</span>,</span><br><span class="line">    +    <span class="string">'&lt;li&gt;第一项&lt;/li&gt;'</span>,</span><br><span class="line">    +    <span class="string">'&lt;li&gt;第二项&lt;/li&gt;'</span>,</span><br><span class="line">    + <span class="string">'&lt;/ul&gt;'</span>;</span><br></pre></td></tr></table></figure>

<h5 id="建议-复杂的数据到视图字符串的转换过程，选用一种模板引擎。"><a href="#建议-复杂的数据到视图字符串的转换过程，选用一种模板引擎。" class="headerlink" title="[建议] 复杂的数据到视图字符串的转换过程，选用一种模板引擎。"></a>[建议] 复杂的数据到视图字符串的转换过程，选用一种模板引擎。</h5><p>解释：</p>
<p>使用模板引擎有如下好处：</p>
<ol>
<li>在开发过程中专注于数据，将视图生成的过程由另外一个层级维护，使程序逻辑结构更清晰。</li>
<li>优秀的模板引擎，通过模板编译技术和高质量的编译产物，能获得比手工拼接字符串更高的性能。</li>
</ol>
<ul>
<li>artTemplate: 体积较小，在所有环境下性能高，语法灵活。</li>
<li>dot.js: 体积小，在现代浏览器下性能高，语法灵活。</li>
<li>etpl: 体积较小，在所有环境下性能高，模板复用性高，语法灵活。</li>
<li>handlebars: 体积大，在所有环境下性能高，扩展性高。</li>
<li>hogon: 体积小，在现代浏览器下性能高。</li>
<li>nunjucks: 体积较大，性能一般，模板复用性高。</li>
</ul>
<h3 id="3-6-对象"><a href="#3-6-对象" class="headerlink" title="3.6 对象"></a>3.6 对象</h3><h5 id="强制-使用对象字面量-创建新-Object。"><a href="#强制-使用对象字面量-创建新-Object。" class="headerlink" title="[强制] 使用对象字面量 {} 创建新 Object。"></a>[强制] 使用对象字面量 <code>{}</code> 创建新 <code>Object</code>。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br></pre></td></tr></table></figure>

<h5 id="强制-对象创建时，如果一个对象的所有-属性-均可以不添加引号，则所有-属性-不得添加引号。"><a href="#强制-对象创建时，如果一个对象的所有-属性-均可以不添加引号，则所有-属性-不得添加引号。" class="headerlink" title="[强制] 对象创建时，如果一个对象的所有 属性 均可以不添加引号，则所有 属性 不得添加引号。"></a>[强制] 对象创建时，如果一个对象的所有 <code>属性</code> 均可以不添加引号，则所有 <code>属性</code> 不得添加引号。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    name: <span class="string">'someone'</span>,</span><br><span class="line">    age: <span class="number">28</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-对象创建时，如果任何一个-属性-需要添加引号，则所有-属性-必须添加-39-。"><a href="#强制-对象创建时，如果任何一个-属性-需要添加引号，则所有-属性-必须添加-39-。" class="headerlink" title="[强制] 对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 必须添加 &#39;。"></a>[强制] 对象创建时，如果任何一个 <code>属性</code> 需要添加引号，则所有 <code>属性</code> 必须添加 <code>&#39;</code>。</h5><p>解释：</p>
<p>如果属性不符合 Identifier 和 NumberLiteral 的形式，就需要以 StringLiteral 的形式提供。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    <span class="string">'name'</span>: <span class="string">'someone'</span>,</span><br><span class="line">    <span class="string">'age'</span>: <span class="number">28</span>,</span><br><span class="line">    <span class="string">'more-info'</span>: <span class="string">'...'</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    name: <span class="string">'someone'</span>,</span><br><span class="line">    age: <span class="number">28</span>,</span><br><span class="line">    <span class="string">'more-info'</span>: <span class="string">'...'</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-不允许修改和扩展任何原生对象和宿主对象的原型。"><a href="#强制-不允许修改和扩展任何原生对象和宿主对象的原型。" class="headerlink" title="[强制] 不允许修改和扩展任何原生对象和宿主对象的原型。"></a>[强制] 不允许修改和扩展任何原生对象和宿主对象的原型。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 以下行为绝对禁止</span></span><br><span class="line"><span class="built_in">String</span>.prototype.trim = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="建议-属性访问时，尽量使用-。"><a href="#建议-属性访问时，尽量使用-。" class="headerlink" title="[建议] 属性访问时，尽量使用 .。"></a>[建议] 属性访问时，尽量使用 <code>.</code>。</h5><p>解释：</p>
<p>属性名符合 Identifier 的要求，就可以通过 <code>.</code> 来访问，否则就只能通过 <code>[expr]</code> 方式访问。</p>
<p>通常在 JavaScript 中声明的对象，属性命名是使用 Camel 命名法，用 <code>.</code> 来访问更清晰简洁。部分特殊的属性(比如来自后端的JSON)，可能采用不寻常的命名方式，可以通过 <code>[expr]</code> 方式访问。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">info.age;</span><br><span class="line">info[<span class="string">'more-info'</span>];</span><br></pre></td></tr></table></figure>

<h5 id="建议-for-in-遍历对象时-使用-hasOwnProperty-过滤掉原型中的属性。"><a href="#建议-for-in-遍历对象时-使用-hasOwnProperty-过滤掉原型中的属性。" class="headerlink" title="[建议] for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性。"></a>[建议] <code>for in</code> 遍历对象时, 使用 <code>hasOwnProperty</code> 过滤掉原型中的属性。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> newInfo = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> info) &#123;</span><br><span class="line">    <span class="keyword">if</span> (info.hasOwnProperty(key)) &#123;</span><br><span class="line">        newInfo[key] = info[key];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>




<h3 id="3-7-数组"><a href="#3-7-数组" class="headerlink" title="3.7 数组"></a>3.7 数组</h3><h5 id="强制-使用数组字面量-创建新数组，除非想要创建的是指定长度的数组。"><a href="#强制-使用数组字面量-创建新数组，除非想要创建的是指定长度的数组。" class="headerlink" title="[强制] 使用数组字面量 [] 创建新数组，除非想要创建的是指定长度的数组。"></a>[强制] 使用数组字面量 <code>[]</code> 创建新数组，除非想要创建的是指定长度的数组。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br></pre></td></tr></table></figure>

<h5 id="强制-遍历数组不使用-for-in。"><a href="#强制-遍历数组不使用-for-in。" class="headerlink" title="[强制] 遍历数组不使用 for in。"></a>[强制] 遍历数组不使用 <code>for in</code>。</h5><p>解释：</p>
<p>数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果.</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line">arr.other = <span class="string">'other things'</span>; <span class="comment">// 这里仅作演示, 实际中应使用Object类型</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 正确的遍历方式</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = arr.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 错误的遍历方式</span></span><br><span class="line"><span class="keyword">for</span> (i <span class="keyword">in</span> arr) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-不因为性能的原因自己实现数组排序功能，尽量使用数组的-sort-方法。"><a href="#建议-不因为性能的原因自己实现数组排序功能，尽量使用数组的-sort-方法。" class="headerlink" title="[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 sort 方法。"></a>[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 <code>sort</code> 方法。</h5><p>解释：</p>
<p>自己实现的常规排序算法，在性能上并不优于数组默认的 sort 方法。以下两种场景可以自己实现排序：</p>
<ol>
<li>需要稳定的排序算法，达到严格一致的排序结果。</li>
<li>数据特点鲜明，适合使用桶排。</li>
</ol>
<h5 id="建议-清空数组使用-length-0。"><a href="#建议-清空数组使用-length-0。" class="headerlink" title="[建议] 清空数组使用 .length = 0。"></a>[建议] 清空数组使用 <code>.length = 0</code>。</h5><h3 id="3-8-函数"><a href="#3-8-函数" class="headerlink" title="3.8 函数"></a>3.8 函数</h3><h4 id="3-8-1-函数长度"><a href="#3-8-1-函数长度" class="headerlink" title="3.8.1 函数长度"></a>3.8.1 函数长度</h4><h5 id="建议-一个函数的长度控制在-50-行以内。"><a href="#建议-一个函数的长度控制在-50-行以内。" class="headerlink" title="[建议] 一个函数的长度控制在 50 行以内。"></a>[建议] 一个函数的长度控制在 <code>50</code> 行以内。</h5><p>解释：</p>
<p>将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。</p>
<p>特定算法等不可分割的逻辑允许例外。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncViewStateOnUserAction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (x.checked) &#123;</span><br><span class="line">        y.checked = <span class="literal">true</span>;</span><br><span class="line">        z.value = <span class="string">''</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        y.checked = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!a.value) &#123;</span><br><span class="line">        warning.innerText = <span class="string">'Please enter it'</span>;</span><br><span class="line">        submitButton.disabled = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        warning.innerText = <span class="string">''</span>;</span><br><span class="line">        submitButton.disabled = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接阅读该函数会难以明确其主线逻辑，因此下方是一种更合理的表达方式：</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncViewStateOnUserAction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    syncXStateToView();</span><br><span class="line">    checkAAvailability();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncXStateToView</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (x.checked) &#123;</span><br><span class="line">        y.checked = <span class="literal">true</span>;</span><br><span class="line">        z.value = <span class="string">''</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        y.checked = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkAAvailability</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!a.value) &#123;</span><br><span class="line">        displayWarningForAMissing();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        clearWarnignForA();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="3-8-2-参数设计"><a href="#3-8-2-参数设计" class="headerlink" title="3.8.2 参数设计"></a>3.8.2 参数设计</h4><h5 id="建议-一个函数的参数控制在-6-个以内。"><a href="#建议-一个函数的参数控制在-6-个以内。" class="headerlink" title="[建议] 一个函数的参数控制在 6 个以内。"></a>[建议] 一个函数的参数控制在 <code>6</code> 个以内。</h5><p>解释：</p>
<p>除去不定长参数以外，函数具备不同逻辑意义的参数建议控制在 6 个以内，过多参数会导致维护难度增大。</p>
<p>某些情况下，如使用 AMD Loader 的 require 加载多个模块时，其 callback 可能会存在较多参数，因此对函数参数的个数不做强制限制。</p>
<h5 id="建议-通过-options-参数传递非数据输入型参数。"><a href="#建议-通过-options-参数传递非数据输入型参数。" class="headerlink" title="[建议] 通过 options 参数传递非数据输入型参数。"></a>[建议] 通过 <code>options</code> 参数传递非数据输入型参数。</h5><p>解释：</p>
<p>有些函数的参数并不是作为算法的输入，而是对算法的某些分支条件判断之用，此类参数建议通过一个 options 参数传递。</p>
<p>如下函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 移除某个元素</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Node&#125;</span> </span>element 需要移除的元素</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;boolean&#125;</span> </span>removeEventListeners 是否同时将所有注册在元素上的事件移除</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeElement</span>(<span class="params">element, removeEventListeners</span>) </span>&#123;</span><br><span class="line">    element.parent.removeChild(element);</span><br><span class="line">    <span class="keyword">if</span> (removeEventListeners) &#123;</span><br><span class="line">        element.clearEventListeners();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可以转换为下面的签名：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 移除某个元素</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Node&#125;</span> </span>element 需要移除的元素</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>options 相关的逻辑配置</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;boolean&#125;</span> </span>options.removeEventListeners 是否同时将所有注册在元素上的事件移除</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeElement</span>(<span class="params">element, options</span>) </span>&#123;</span><br><span class="line">    element.parent.removeChild(element);</span><br><span class="line">    <span class="keyword">if</span> (options.removeEventListeners) &#123;</span><br><span class="line">        element.clearEventListeners();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这种模式有几个显著的优势：</p>
<ul>
<li>boolean 型的配置项具备名称，从调用的代码上更易理解其表达的逻辑意义。</li>
<li>当配置项有增长时，无需无休止地增加参数个数，不会出现 removeElement(element, true, false, false, 3) 这样难以理解的调用代码。</li>
<li>当部分配置参数可选时，多个参数的形式非常难处理重载逻辑，而使用一个 options 对象只需判断属性是否存在，实现得以简化。</li>
</ul>
<h4 id="3-8-3-闭包"><a href="#3-8-3-闭包" class="headerlink" title="3.8.3 闭包"></a>3.8.3 闭包</h4><h5 id="建议-在适当的时候将闭包内大对象置为-null。"><a href="#建议-在适当的时候将闭包内大对象置为-null。" class="headerlink" title="[建议] 在适当的时候将闭包内大对象置为 null。"></a>[建议] 在适当的时候将闭包内大对象置为 <code>null</code>。</h5><p>解释：</p>
<p>在 JavaScript 中，无需特别的关键词就可以使用闭包，一个函数可以任意访问在其定义的作用域外的变量。需要注意的是，函数的作用域是静态的，即在定义时决定，与调用的时机和方式没有任何关系。</p>
<p>闭包会阻止一些变量的垃圾回收，对于较老旧的JavaScript引擎，可能导致外部所有变量均无法回收。</p>
<p>首先一个较为明确的结论是，以下内容会影响到闭包内变量的回收：</p>
<ul>
<li>嵌套的函数中是否有使用该变量。</li>
<li>嵌套的函数中是否有 <strong>直接调用eval</strong>。</li>
<li>是否使用了 with 表达式。</li>
</ul>
<p>Chakra、V8 和 SpiderMonkey 将受以上因素的影响，表现出不尽相同又较为相似的回收策略，而JScript.dll和Carakan则完全没有这方面的优化，会完整保留整个 LexicalEnvironment 中的所有变量绑定，造成一定的内存消耗。</p>
<p>由于对闭包内变量有回收优化策略的 Chakra、V8 和 SpiderMonkey 引擎的行为较为相似，因此可以总结如下，当返回一个函数 fn 时：</p>
<ol>
<li>如果 fn 的 [[Scope]] 是ObjectEnvironment（with 表达式生成 ObjectEnvironment，函数和 catch 表达式生成 DeclarativeEnvironment），则：<ol>
<li>如果是 V8 引擎，则退出全过程。</li>
<li>如果是 SpiderMonkey，则处理该 ObjectEnvironment 的外层 LexicalEnvironment。</li>
</ol>
</li>
<li>获取当前 LexicalEnvironment 下的所有类型为 Function 的对象，对于每一个 Function 对象，分析其 FunctionBody：<ol>
<li>如果 FunctionBody 中含有 <strong>直接调用eval</strong>，则退出全过程。</li>
<li>否则得到所有的 Identifier。</li>
<li>对于每一个 Identifier，设其为 name，根据查找变量引用的规则，从 LexicalEnvironment 中找出名称为 name 的绑定 binding。</li>
<li>对 binding 添加 notSwap 属性，其值为 true。</li>
</ol>
</li>
<li>检查当前 LexicalEnvironment 中的每一个变量绑定，如果该绑定有 notSwap 属性且值为 true，则：<ol>
<li>如果是V8引擎，删除该绑定。</li>
<li>如果是SpiderMonkey，将该绑定的值设为 undefined，将删除 notSwap 属性。</li>
</ol>
</li>
</ol>
<p>对于Chakra引擎，暂无法得知是按 V8 的模式还是按 SpiderMonkey 的模式进行。</p>
<p>如果有 <strong>非常庞大</strong> 的对象，且预计会在 <strong>老旧的引擎</strong> 中执行，则使用闭包时，注意将闭包不需要的对象置为空引用。</p>
<h5 id="建议-使用-IIFE-避免-Lift-效应。"><a href="#建议-使用-IIFE-避免-Lift-效应。" class="headerlink" title="[建议] 使用 IIFE 避免 Lift 效应。"></a>[建议] 使用 <code>IIFE</code> 避免 <code>Lift 效应</code>。</h5><p>解释：</p>
<p>在引用函数外部变量时，函数执行时外部变量的值由运行时决定而非定义时，最典型的场景如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tasks = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">    tasks[tasks.length] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'Current cursor is at '</span> + i);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> len = tasks.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    tasks[len]();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>以上代码对 tasks 中的函数的执行均会输出 <code>Current cursor is at 5</code>，往往不符合预期。</p>
<p>此现象称为 <strong>Lift 效应</strong> 。解决的方式是通过额外加上一层闭包函数，将需要的外部变量作为参数传递来解除变量的绑定关系：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tasks = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">    <span class="comment">// 注意有一层额外的闭包</span></span><br><span class="line">    tasks[tasks.length] = (<span class="function"><span class="keyword">function</span> (<span class="params">i</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'Current cursor is at '</span> + i);</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> len = tasks.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    tasks[len]();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-8-4-空函数"><a href="#3-8-4-空函数" class="headerlink" title="3.8.4 空函数"></a>3.8.4 空函数</h4><h5 id="建议-空函数不使用-new-Function-的形式。"><a href="#建议-空函数不使用-new-Function-的形式。" class="headerlink" title="[建议] 空函数不使用 new Function() 的形式。"></a>[建议] 空函数不使用 <code>new Function()</code> 的形式。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> emptyFunction = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。"><a href="#建议-对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。" class="headerlink" title="[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。"></a>[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> EMPTY_FUNCTION = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyClass</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyClass.prototype.abstractMethod = EMPTY_FUNCTION;</span><br><span class="line">MyClass.prototype.hooks.before = EMPTY_FUNCTION;</span><br><span class="line">MyClass.prototype.hooks.after = EMPTY_FUNCTION;</span><br></pre></td></tr></table></figure>







<h3 id="3-9-面向对象"><a href="#3-9-面向对象" class="headerlink" title="3.9 面向对象"></a>3.9 面向对象</h3><h5 id="强制-类的继承方案，实现时需要修正-constructor。"><a href="#强制-类的继承方案，实现时需要修正-constructor。" class="headerlink" title="[强制] 类的继承方案，实现时需要修正 constructor。"></a>[强制] 类的继承方案，实现时需要修正 <code>constructor</code>。</h5><p>解释：</p>
<p>通常使用其他 library 的类继承方案都会进行 constructor 修正。如果是自己实现的类继承方案，需要进行 constructor 修正。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 构建类之间的继承关系</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Function&#125;</span> </span>subClass 子类函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Function&#125;</span> </span>superClass 父类函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inherits</span>(<span class="params">subClass, superClass</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="keyword">new</span> <span class="built_in">Function</span>();</span><br><span class="line">    F.prototype = superClass.prototype;</span><br><span class="line">    subClass.prototype = <span class="keyword">new</span> F();</span><br><span class="line">    subClass.prototype.constructor = subClass;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-声明类时，保证-constructor-的正确性。"><a href="#建议-声明类时，保证-constructor-的正确性。" class="headerlink" title="[建议] 声明类时，保证 constructor 的正确性。"></a>[建议] 声明类时，保证 <code>constructor</code> 的正确性。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接prototype等于对象时，需要修正constructor</span></span><br><span class="line">Animal.prototype = &#123;</span><br><span class="line">    <span class="keyword">constructor</span>: Animal,</span><br><span class="line"></span><br><span class="line">    jump: function () &#123;</span><br><span class="line">        alert(<span class="string">'animal '</span> + <span class="keyword">this</span>.name + <span class="string">' jump'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这种方式扩展prototype则无需理会constructor</span></span><br><span class="line">Animal.prototype.jump = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">'animal '</span> + <span class="keyword">this</span>.name + <span class="string">' jump'</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h5 id="建议-属性在构造函数中声明，方法在原型中声明。"><a href="#建议-属性在构造函数中声明，方法在原型中声明。" class="headerlink" title="[建议] 属性在构造函数中声明，方法在原型中声明。"></a>[建议] 属性在构造函数中声明，方法在原型中声明。</h5><p>解释：</p>
<p>原型对象的成员被所有实例共享，能节约内存占用。所以编码时我们应该遵守这样的原则：原型对象包含程序不会修改的成员，如方法函数或配置项。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">value, engine</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.value = value;</span><br><span class="line">    <span class="keyword">this</span>.engine = engine;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">TextNode.prototype.clone = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-自定义事件的-事件名-必须全小写。"><a href="#强制-自定义事件的-事件名-必须全小写。" class="headerlink" title="[强制] 自定义事件的 事件名 必须全小写。"></a>[强制] 自定义事件的 <code>事件名</code> 必须全小写。</h5><p>解释：</p>
<p>在 JavaScript 广泛应用的浏览器环境，绝大多数 DOM 事件名称都是全小写的。为了遵循大多数 JavaScript 开发者的习惯，在设计自定义事件时，事件名也应该全小写。</p>
<h5 id="强制-自定义事件只能有一个-event-参数。如果事件需要传递较多信息，应仔细设计事件对象。"><a href="#强制-自定义事件只能有一个-event-参数。如果事件需要传递较多信息，应仔细设计事件对象。" class="headerlink" title="[强制] 自定义事件只能有一个 event 参数。如果事件需要传递较多信息，应仔细设计事件对象。"></a>[强制] 自定义事件只能有一个 <code>event</code> 参数。如果事件需要传递较多信息，应仔细设计事件对象。</h5><p>解释：</p>
<p>一个事件对象的好处有：</p>
<ol>
<li>顺序无关，避免事件监听者需要记忆参数顺序。</li>
<li>每个事件信息都可以根据需要提供或者不提供，更自由。</li>
<li>扩展方便，未来添加事件信息时，无需考虑会破坏监听器参数形式而无法向后兼容。</li>
</ol>
<h5 id="建议-设计自定义事件时，应考虑禁止默认行为。"><a href="#建议-设计自定义事件时，应考虑禁止默认行为。" class="headerlink" title="[建议] 设计自定义事件时，应考虑禁止默认行为。"></a>[建议] 设计自定义事件时，应考虑禁止默认行为。</h5><p>解释：</p>
<p>常见禁止默认行为的方式有两种：</p>
<ol>
<li>事件监听函数中 return false。</li>
<li>事件对象中包含禁止默认行为的方法，如 preventDefault。</li>
</ol>
<h3 id="3-10-动态特性"><a href="#3-10-动态特性" class="headerlink" title="3.10 动态特性"></a>3.10 动态特性</h3><h4 id="3-10-1-eval"><a href="#3-10-1-eval" class="headerlink" title="3.10.1 eval"></a>3.10.1 eval</h4><h5 id="强制-避免使用直接-eval-函数。"><a href="#强制-避免使用直接-eval-函数。" class="headerlink" title="[强制] 避免使用直接 eval 函数。"></a>[强制] 避免使用直接 <code>eval</code> 函数。</h5><p>解释：</p>
<p>直接 eval，指的是以函数方式调用 eval 的调用方法。直接 eval 调用执行代码的作用域为本地作用域，应当避免。</p>
<p>如果有特殊情况需要使用直接 eval，需在代码中用详细的注释说明为何必须使用直接 eval，不能使用其它动态执行代码的方式，同时需要其他资深工程师进行 Code Review。</p>
<h5 id="建议-尽量避免使用-eval-函数。"><a href="#建议-尽量避免使用-eval-函数。" class="headerlink" title="[建议] 尽量避免使用 eval 函数。"></a>[建议] 尽量避免使用 <code>eval</code> 函数。</h5><h4 id="3-10-2-动态执行代码"><a href="#3-10-2-动态执行代码" class="headerlink" title="3.10.2 动态执行代码"></a>3.10.2 动态执行代码</h4><h5 id="建议-使用-new-Function-执行动态代码。"><a href="#建议-使用-new-Function-执行动态代码。" class="headerlink" title="[建议] 使用 new Function 执行动态代码。"></a>[建议] 使用 <code>new Function</code> 执行动态代码。</h5><p>解释：</p>
<p>通过 new Function 生成的函数作用域是全局使用域，不会影响当当前的本地作用域。如果有动态代码执行的需求，建议使用 new Function。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> handler = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">'x'</span>, <span class="string">'y'</span>, <span class="string">'return x + y;'</span>);</span><br><span class="line"><span class="keyword">var</span> result = handler($(<span class="string">'#x'</span>).val(), $(<span class="string">'#y'</span>).val());</span><br></pre></td></tr></table></figure>



<h4 id="3-10-3-with"><a href="#3-10-3-with" class="headerlink" title="3.10.3 with"></a>3.10.3 with</h4><h5 id="建议-尽量不要使用-with。"><a href="#建议-尽量不要使用-with。" class="headerlink" title="[建议] 尽量不要使用 with。"></a>[建议] 尽量不要使用 <code>with</code>。</h5><p>解释：</p>
<p>使用 with 可能会增加代码的复杂度，不利于阅读和管理；也会对性能有影响。大多数使用 with 的场景都能使用其他方式较好的替代。所以，尽量不要使用 with。</p>
<h4 id="3-10-4-delete"><a href="#3-10-4-delete" class="headerlink" title="3.10.4 delete"></a>3.10.4 delete</h4><h5 id="建议-减少-delete-的使用。"><a href="#建议-减少-delete-的使用。" class="headerlink" title="[建议] 减少 delete 的使用。"></a>[建议] 减少 <code>delete</code> 的使用。</h5><p>解释：</p>
<p>如果没有特别的需求，减少或避免使用<code>delete</code>。<code>delete</code>的使用会破坏部分 JavaScript 引擎的性能优化。</p>
<h5 id="建议-处理-delete-可能产生的异常。"><a href="#建议-处理-delete-可能产生的异常。" class="headerlink" title="[建议] 处理 delete 可能产生的异常。"></a>[建议] 处理 <code>delete</code> 可能产生的异常。</h5><p>解释：</p>
<p>对于有被遍历需求，且值 null 被认为具有业务逻辑意义的值的对象，移除某个属性必须使用 delete 操作。</p>
<p>在严格模式或IE下使用 delete 时，不能被删除的属性会抛出异常，因此在不确定属性是否可以删除的情况下，建议添加 try-catch 块。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">delete</span> o.x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span> (deleteError) &#123;</span><br><span class="line">    o.x = <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="3-10-5-对象属性"><a href="#3-10-5-对象属性" class="headerlink" title="3.10.5 对象属性"></a>3.10.5 对象属性</h4><h5 id="建议-避免修改外部传入的对象。"><a href="#建议-避免修改外部传入的对象。" class="headerlink" title="[建议] 避免修改外部传入的对象。"></a>[建议] 避免修改外部传入的对象。</h5><p>解释：</p>
<p>JavaScript 因其脚本语言的动态特性，当一个对象未被 seal 或 freeze 时，可以任意添加、删除、修改属性值。</p>
<p>但是随意地对 非自身控制的对象 进行修改，很容易造成代码在不可预知的情况下出现问题。因此，设计良好的组件、函数应该避免对外部传入的对象的修改。</p>
<p>下面代码的 selectNode 方法修改了由外部传入的 datasource 对象。如果 datasource 用在其它场合（如另一个 Tree 实例）下，会造成状态的混乱。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Tree</span>(<span class="params">datasource</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.datasource = datasource;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Tree.prototype.selectNode = <span class="function"><span class="keyword">function</span> (<span class="params">id</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 从datasource中找出节点对象</span></span><br><span class="line">    <span class="keyword">var</span> node = <span class="keyword">this</span>.findNode(id);</span><br><span class="line">    <span class="keyword">if</span> (node) &#123;</span><br><span class="line">        node.selected = <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">this</span>.flushView();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>对于此类场景，需要使用额外的对象来维护，使用由自身控制，不与外部产生任何交互的 selectedNodeIndex 对象来维护节点的选中状态，不对 datasource 作任何修改。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Tree</span>(<span class="params">datasource</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.datasource = datasource;</span><br><span class="line">    <span class="keyword">this</span>.selectedNodeIndex = &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Tree.prototype.selectNode = <span class="function"><span class="keyword">function</span> (<span class="params">id</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 从datasource中找出节点对象</span></span><br><span class="line">    <span class="keyword">var</span> node = <span class="keyword">this</span>.findNode(id);</span><br><span class="line">    <span class="keyword">if</span> (node) &#123;</span><br><span class="line">        <span class="keyword">this</span>.selectedNodeIndex[id] = <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">this</span>.flushView();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>除此之外，也可以通过 deepClone 等手段将自身维护的对象与外部传入的分离，保证不会相互影响。</p>
<h5 id="建议-具备强类型的设计。"><a href="#建议-具备强类型的设计。" class="headerlink" title="[建议] 具备强类型的设计。"></a>[建议] 具备强类型的设计。</h5><p>解释：</p>
<ul>
<li>如果一个属性被设计为 boolean 类型，则不要使用 1 / 0 作为其值。对于标识性的属性，如对代码体积有严格要求，可以从一开始就设计为 number 类型且将 0 作为否定值。</li>
<li>从 DOM 中取出的值通常为 string 类型，如果有对象或函数的接收类型为 number 类型，提前作好转换，而不是期望对象、函数可以处理多类型的值。</li>
</ul>
<h2 id="4-浏览器环境"><a href="#4-浏览器环境" class="headerlink" title="4 浏览器环境"></a>4 浏览器环境</h2><h3 id="4-1-模块化"><a href="#4-1-模块化" class="headerlink" title="4.1 模块化"></a>4.1 模块化</h3><h4 id="4-1-1-AMD"><a href="#4-1-1-AMD" class="headerlink" title="4.1.1 AMD"></a>4.1.1 AMD</h4><h5 id="强制-使用-AMD-作为模块定义。"><a href="#强制-使用-AMD-作为模块定义。" class="headerlink" title="[强制] 使用 AMD 作为模块定义。"></a>[强制] 使用 <code>AMD</code> 作为模块定义。</h5><p>解释：</p>
<p>AMD 作为由社区认可的模块定义形式，提供多种重载提供灵活的使用方式，并且绝大多数优秀的 Library 都支持 AMD，适合作为规范。</p>
<p>目前，比较成熟的 AMD Loader 有：</p>
<ul>
<li>官方实现的 <a href="http://requirejs.org/" target="_blank" rel="noopener">requirejs</a></li>
<li>百度自己实现的 <a href="https://github.com/ecomfe/esl" target="_blank" rel="noopener">esl</a></li>
</ul>
<h5 id="强制-模块-id-必须符合标准。"><a href="#强制-模块-id-必须符合标准。" class="headerlink" title="[强制] 模块 id 必须符合标准。"></a>[强制] 模块 <code>id</code> 必须符合标准。</h5><p>解释：</p>
<p>模块 id 必须符合以下约束条件：</p>
<ol>
<li>类型为 string，并且是由 <code>/</code> 分割的一系列 terms 来组成。例如：<code>this/is/a/module</code>。</li>
<li>term 应该符合 [a-zA-Z0-9_-]+ 规则。</li>
<li>不应该有 .js 后缀。</li>
<li>跟文件的路径保持一致。</li>
</ol>
<h4 id="4-1-2-define"><a href="#4-1-2-define" class="headerlink" title="4.1.2 define"></a>4.1.2 define</h4><h5 id="建议-定义模块时不要指明-id-和-dependencies。"><a href="#建议-定义模块时不要指明-id-和-dependencies。" class="headerlink" title="[建议] 定义模块时不要指明 id 和 dependencies。"></a>[建议] 定义模块时不要指明 <code>id</code> 和 <code>dependencies</code>。</h5><p>解释：</p>
<p>在 AMD 的设计思想里，模块名称是和所在路径相关的，匿名的模块更利于封包和迁移。模块依赖应在模块定义内部通过 local require 引用。</p>
<p>所以，推荐使用 define(factory) 的形式进行模块定义。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>


<h5 id="建议-使用-return-来返回模块定义。"><a href="#建议-使用-return-来返回模块定义。" class="headerlink" title="[建议] 使用 return 来返回模块定义。"></a>[建议] 使用 <code>return</code> 来返回模块定义。</h5><p>解释：</p>
<p>使用 return 可以减少 factory 接收的参数（不需要接收 exports 和 module），在没有 AMD Loader 的场景下也更容易进行简单的处理来伪造一个 Loader。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> exports = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> exports;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>




<h4 id="4-1-3-require"><a href="#4-1-3-require" class="headerlink" title="4.1.3 require"></a>4.1.3 require</h4><h5 id="强制-全局运行环境中，require-必须以-async-require-形式调用。"><a href="#强制-全局运行环境中，require-必须以-async-require-形式调用。" class="headerlink" title="[强制] 全局运行环境中，require 必须以 async require 形式调用。"></a>[强制] 全局运行环境中，<code>require</code> 必须以 <code>async require</code> 形式调用。</h5><p>解释：</p>
<p>模块的加载过程是异步的，同步调用并无法保证得到正确的结果。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="built_in">require</span>([<span class="string">'foo'</span>], <span class="function"><span class="keyword">function</span> (<span class="params">foo</span>) </span>&#123;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> foo = <span class="built_in">require</span>(<span class="string">'foo'</span>);</span><br></pre></td></tr></table></figure>

<h5 id="强制-模块定义中只允许使用-local-require，不允许使用-global-require。"><a href="#强制-模块定义中只允许使用-local-require，不允许使用-global-require。" class="headerlink" title="[强制] 模块定义中只允许使用 local require，不允许使用 global require。"></a>[强制] 模块定义中只允许使用 <code>local require</code>，不允许使用 <code>global require</code>。</h5><p>解释：</p>
<ol>
<li>在模块定义中使用 global require，对封装性是一种破坏。</li>
<li>在 AMD 里，global require 是可以被重命名的。并且 Loader 甚至没有全局的 require 变量，而是用 Loader 名称做为 global require。模块定义不应该依赖使用的 Loader。</li>
</ol>
<h5 id="强制-Package在实现时，内部模块的-require-必须使用-relative-id。"><a href="#强制-Package在实现时，内部模块的-require-必须使用-relative-id。" class="headerlink" title="[强制] Package在实现时，内部模块的 require 必须使用 relative id。"></a>[强制] Package在实现时，内部模块的 <code>require</code> 必须使用 <code>relative id</code>。</h5><p>解释：</p>
<p>对于任何可能通过 发布-引入 的形式复用的第三方库、框架、包，开发者所定义的名称不代表使用者使用的名称。因此不要基于任何名称的假设。在实现源码中，require 自身的其它模块时使用 relative id。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> util = <span class="built_in">require</span>(<span class="string">'./util'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>


<h5 id="建议-不会被调用的依赖模块，在-factory-开始处统一-require。"><a href="#建议-不会被调用的依赖模块，在-factory-开始处统一-require。" class="headerlink" title="[建议] 不会被调用的依赖模块，在 factory 开始处统一 require。"></a>[建议] 不会被调用的依赖模块，在 <code>factory</code> 开始处统一 <code>require</code>。</h5><p>解释：</p>
<p>有些模块是依赖的模块，但不会在模块实现中被直接调用，最为典型的是 css / js / tpl 等 Plugin 所引入的外部内容。此类内容建议放在模块定义最开始处统一引用。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">define(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">require</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">require</span>(<span class="string">'css!foo.css'</span>);</span><br><span class="line">        <span class="built_in">require</span>(<span class="string">'tpl!bar.tpl.html'</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>



<h3 id="4-2-DOM"><a href="#4-2-DOM" class="headerlink" title="4.2 DOM"></a>4.2 DOM</h3><h4 id="4-2-1-元素获取"><a href="#4-2-1-元素获取" class="headerlink" title="4.2.1 元素获取"></a>4.2.1 元素获取</h4><h5 id="建议-对于单个元素，尽可能使用-document-getElementById-获取，避免使用document-all。"><a href="#建议-对于单个元素，尽可能使用-document-getElementById-获取，避免使用document-all。" class="headerlink" title="[建议] 对于单个元素，尽可能使用 document.getElementById 获取，避免使用document.all。"></a>[建议] 对于单个元素，尽可能使用 <code>document.getElementById</code> 获取，避免使用<code>document.all</code>。</h5><h5 id="建议-对于多个元素的集合，尽可能使用-context-getElementsByTagName-获取。其中-context-可以为-document-或其他元素。指定-tagName-参数为-可以获得所有子元素。"><a href="#建议-对于多个元素的集合，尽可能使用-context-getElementsByTagName-获取。其中-context-可以为-document-或其他元素。指定-tagName-参数为-可以获得所有子元素。" class="headerlink" title="[建议] 对于多个元素的集合，尽可能使用 context.getElementsByTagName 获取。其中 context 可以为 document 或其他元素。指定 tagName 参数为 * 可以获得所有子元素。"></a>[建议] 对于多个元素的集合，尽可能使用 <code>context.getElementsByTagName</code> 获取。其中 <code>context</code> 可以为 <code>document</code> 或其他元素。指定 <code>tagName</code> 参数为 <code>*</code> 可以获得所有子元素。</h5><h5 id="建议-遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组。"><a href="#建议-遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组。" class="headerlink" title="[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组。"></a>[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组。</h5><p>解释：</p>
<p>原生获取元素集合的结果并不直接引用 DOM 元素，而是对索引进行读取，所以 DOM 结构的改变会实时反映到结果中。</p>
<p>示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> elements = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'*'</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 显示为 DIV</span></span></span><br><span class="line">alert(elements[0].tagName);</span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="keyword">var</span> div = elements[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> p = <span class="built_in">document</span>.createElement(<span class="string">'p'</span>);</span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.body.insertBefore(p, div);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 显示为 P</span></span></span><br><span class="line">alert(elements[0].tagName);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h5 id="建议-获取元素的直接子元素时使用-children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点。"><a href="#建议-获取元素的直接子元素时使用-children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点。" class="headerlink" title="[建议] 获取元素的直接子元素时使用 children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点。"></a>[建议] 获取元素的直接子元素时使用 <code>children</code>。避免使用<code>childNodes</code>，除非预期是需要包含文本、注释和属性类型的节点。</h5><h4 id="4-2-2-样式获取"><a href="#4-2-2-样式获取" class="headerlink" title="4.2.2 样式获取"></a>4.2.2 样式获取</h4><h5 id="建议-获取元素实际样式信息时，应使用-getComputedStyle-或-currentStyle。"><a href="#建议-获取元素实际样式信息时，应使用-getComputedStyle-或-currentStyle。" class="headerlink" title="[建议] 获取元素实际样式信息时，应使用 getComputedStyle 或 currentStyle。"></a>[建议] 获取元素实际样式信息时，应使用 <code>getComputedStyle</code> 或 <code>currentStyle</code>。</h5><p>解释：</p>
<p>通过 style 只能获得内联定义或通过 JavaScript 直接设置的样式。通过 CSS class 设置的元素样式无法直接通过 style 获取。</p>
<h4 id="4-2-3-样式设置"><a href="#4-2-3-样式设置" class="headerlink" title="4.2.3 样式设置"></a>4.2.3 样式设置</h4><h5 id="建议-尽可能通过为元素添加预定义的-className-来改变元素样式，避免直接操作-style-设置。"><a href="#建议-尽可能通过为元素添加预定义的-className-来改变元素样式，避免直接操作-style-设置。" class="headerlink" title="[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置。"></a>[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置。</h5><h5 id="强制-通过-style-对象设置元素样式时，对于带单位非-0-值的属性，不允许省略单位。"><a href="#强制-通过-style-对象设置元素样式时，对于带单位非-0-值的属性，不允许省略单位。" class="headerlink" title="[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位。"></a>[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位。</h5><p>解释：</p>
<p>除了 IE，标准浏览器会忽略不规范的属性值，导致兼容性问题。</p>
<h4 id="4-2-4-DOM-操作"><a href="#4-2-4-DOM-操作" class="headerlink" title="4.2.4 DOM 操作"></a>4.2.4 DOM 操作</h4><h5 id="建议-操作-DOM-时，尽量减少页面-reflow。"><a href="#建议-操作-DOM-时，尽量减少页面-reflow。" class="headerlink" title="[建议] 操作 DOM 时，尽量减少页面 reflow。"></a>[建议] 操作 <code>DOM</code> 时，尽量减少页面 <code>reflow</code>。</h5><p>解释：</p>
<p>页面 reflow 是非常耗时的行为，非常容易导致性能瓶颈。下面一些场景会触发浏览器的reflow：</p>
<ul>
<li>DOM元素的添加、修改（内容）、删除。</li>
<li>应用新的样式或者修改任何影响元素布局的属性。</li>
<li>Resize浏览器窗口、滚动页面。</li>
<li>读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。</li>
</ul>
<h5 id="建议-尽量减少-DOM-操作。"><a href="#建议-尽量减少-DOM-操作。" class="headerlink" title="[建议] 尽量减少 DOM 操作。"></a>[建议] 尽量减少 <code>DOM</code> 操作。</h5><p>解释：</p>
<p>DOM 操作也是非常耗时的一种操作，减少 DOM 操作有助于提高性能。举一个简单的例子，构建一个列表。我们可以用两种方式：</p>
<ol>
<li>在循环体中 createElement 并 append 到父元素中。</li>
<li>在循环体中拼接 HTML 字符串，循环结束后写父元素的 innerHTML。</li>
</ol>
<p>第一种方法看起来比较标准，但是每次循环都会对 DOM 进行操作，性能极低。在这里推荐使用第二种方法。</p>
<h4 id="4-2-5-DOM-事件"><a href="#4-2-5-DOM-事件" class="headerlink" title="4.2.5 DOM 事件"></a>4.2.5 DOM 事件</h4><h5 id="建议-优先使用-addEventListener-attachEvent-绑定事件，避免直接在-HTML-属性中或-DOM-的-expando-属性绑定事件处理。"><a href="#建议-优先使用-addEventListener-attachEvent-绑定事件，避免直接在-HTML-属性中或-DOM-的-expando-属性绑定事件处理。" class="headerlink" title="[建议] 优先使用 addEventListener / attachEvent 绑定事件，避免直接在 HTML 属性中或 DOM 的 expando 属性绑定事件处理。"></a>[建议] 优先使用 <code>addEventListener / attachEvent</code> 绑定事件，避免直接在 HTML 属性中或 DOM 的 <code>expando</code> 属性绑定事件处理。</h5><p>解释：</p>
<p>expando 属性绑定事件容易导致互相覆盖。</p>
<h5 id="建议-使用-addEventListener-时第三个参数使用-false。"><a href="#建议-使用-addEventListener-时第三个参数使用-false。" class="headerlink" title="[建议] 使用 addEventListener 时第三个参数使用 false。"></a>[建议] 使用 <code>addEventListener</code> 时第三个参数使用 <code>false</code>。</h5><p>解释：</p>
<p>标准浏览器中的 addEventListener 可以通过第三个参数指定两种时间触发模型：冒泡和捕获。而 IE 的 attachEvent 仅支持冒泡的事件触发。所以为了保持一致性，通常 addEventListener 的第三个参数都为 false。</p>
<h5 id="建议-在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器。"><a href="#建议-在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器。" class="headerlink" title="[建议] 在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器。"></a>[建议] 在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器。</h5>
      
      <!-- reward -->
      
      <div id="reward-btn">
        Donate
      </div>
      
    </div>
    
    
      <!-- copyright -->
      
        <div class="declare">
          <ul class="post-copyright">
            <li>
              <i class="ri-copyright-line"></i>
              <strong>Copyright： </strong>
              Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
            </li>
          </ul>
        </div>
        
    <footer class="article-footer">
      
          
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://bodboy.gitee.io/blog/2018/12/15/js-standard/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Hexo/" rel="tag">Hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Sample/" rel="tag">Sample</a></li></ul>


    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2018/12/25/es6-standard/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            ES6编码规范
          
        </div>
      </a>
    
    
      <a href="/blog/2018/12/02/html-standard/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">HTML编码规范</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        app_id: 'uW8QYGvvhWmNWdiwpznJ0GVa-gzGzoHsz',
        app_key: 'LrJhMzx9qEwcMV1DJjTI6f6C',
        path: window.location.pathname,
        notify: 'false',
        verify: 'false',
        avatar: '[object Object]',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2019-2021
        <i class="ri-heart-fill heart_icon"></i> panda
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        Powered by <a href="https://hexo.io" target="_blank">Hexo</a>
        <span class="division">|</span>
        Theme - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="https://portrait.gitee.com/uploads/avatars/user/1007/3023420_bodboy_1578973210.png!avatar200" alt="小熊的博客"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/tags/%E6%97%85%E8%A1%8C/">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script>
  try {
    var typed = new Typed("#subtitle", {
      strings: ['面朝大海，春暖花开', '愿你一生努力，一生被爱', '想要的都拥有，得不到的都释怀'],
      startDelay: 0,
      typeSpeed: 200,
      loop: true,
      backSpeed: 100,
      showCursor: true
    });
  } catch (err) {
  }

</script>




<script src="/blog/js/tocbot.min.js"></script>

<script>
  // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>



<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/blog/dist/main.js"></script>



<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
  });

  MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for(i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
  var ayerConfig = {
    mathjax: true
  }
</script>




<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>

  
<script src="/blog/js/clickLove.js"></script>



<!-- 复制 -->



    
    <div id="music">
    
    
    
    <iframe frameborder="no" border="1" marginwidth="0" marginheight="0" width="200" height="52"
        src="//music.163.com/outchain/player?type=2&id=1297802566&auto=1&height=32"></iframe>
</div>

<style>
    #music {
        position: fixed;
        right: 15px;
        bottom: 0;
        z-index: 998;
    }
</style>
    
  </div>
</body>

</html>